Question

添加像这样的事件监听器

    class A{

        setUp(){
            //addEventListener
            $("#id")[0].addEventListener("click",this.rollDiePressed);
        }

        rollDiePressed(){
            console.log(this)
        }

        addHtml(){
            var actionTemplate =           
                '<div onclick="ctrl.rollDiePressed()">' +
                'ROLL' +
                '</div>'

                //add the html
                $("#htmlarea").html(resultHtml);
        }

    }

点击html意味着＆＃34;这个＆＃34; rollDiePressed里面是对元素本身的反应。如果我们希望它引用我们需要这样做的类

$("#id")[0].addEventListener("click",this.rollDiePressed.bind(this));

到目前为止一切都很好。但是，当在addHtml()中添加html时，调用rollDiePressed（）并不像我期望的那样引用元素本身（并且在方法setUp中发生），而是引用类本身！

为什么会这样？我认为默认情况下该事件将始终引用该元素。添加＆＃34;这个＆＃34;作为html的参考解决了它，我只是非常有兴趣了解为什么会发生这种情况。

Answer 1

因为当你执行<element onclick="myfunc();">时，该函数仅作为实际（隐式）事件处理程序主体的一部分被调用;该函数本身不是事件处理程序，即它没有附加到元素。 this关键字指向函数的所有者，在这种情况下仍然是类。如果您已完成element.onclick = myfunc（注意：此处未调用函数，仅限绑定），您可以将触发元素设为this。

特殊范围切换在不同的html添加函数中

1 个答案: