Question

HTML

<button id="test">Click me!</button>

的JavaScript

var button = {
    clicked: false,
    click: function() {
        this.clicked = true;
        console.log("this:", this, "button.clicked?", button.clicked);
    }
};

var elem = document.getElementById("test");
elem.addEventListener("click", button.click, false);

测试时（http://jsfiddle.net/4hdQF/），false会被打印出来。

将console.log语句替换为..., this.clicked？“，this.clicked）`，它似乎成功运行 - http://jsfiddle.net/YG8ST/。

本书提到使用bind修复第一个错误的应用程序。但是，用button.clicked替换this.clicked是否有效？似乎是，当调用click函数时，它将使用this检查是否单击了当前的上下文按钮。

Answer 1

不，使用this 不与使用button相同。在事件处理程序中，this将绑定到DOM节点，而不是该对象。

如果你可以将this作为DOM节点，那么当然可以使用它。但是，该按钮对象的“clicked”属性不会受到该代码的影响。

通过使用绑定函数设置事件处理程序：

elem.addEventListener("click", button.click.bind(button), false);

您确保处理程序中的this将成为按钮对象，尽管运行时将尝试以与其始终相同的方式调用处理程序。从bind返回的函数基本上覆盖了调用设置this的内容。

修复onClick Closure Bug

1 个答案: