javascript - 不同 html 添加功能中的特殊范围切换

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 意味着 rollDiePressed 中的“this”正在引用元素本身。如果我们希望它引用我们需要这样做的类

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

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

为什么会发生这种情况？我认为默认情况下事件将始终引用该元素。在 html 上添加“this”作为引用解决了这个问题，我只是非常有兴趣了解为什么会发生这种情况。

Answer 1

因为当你这样做 <element onclick="myfunc();"> ，该函数仅作为实际(隐式)事件处理程序主体的一部分被调用；该函数本身并不是事件处理程序，即它不附加到元素。 this关键字指向函数的所有者，在本例中仍然是类。如果你做了element.onclick = myfunc (注意:此处未调用函数，仅绑定(bind))相反，您将获得触发元素 this .