在构造函数中添加事件监听器答案

【问题标题】：Adding Event Listeners in constructor在构造函数中添加事件监听器
【发布时间】：2012-09-25 17:46:41
【问题描述】：

function Foo(elementId, buttonId) {
this.element = document.getElementById(elementId);
this.button = document.getElementById(buttonId);
this.bar = function() {dosomething};
this.button.addEventListener('click', function(e) {this.bar();}, false);
}

var myFoo = new Foo('someElement', 'someButton');

我想在我的构造函数中添加事件侦听器，但它似乎不起作用。使用正确的语法可以做到这一点吗？我总是挂断电话：

this.button.addEventListener('click', function(e) {this.bar();}, false);

【问题讨论】：

标签： javascript events object constructor

【解决方案1】：

您的this 值在构造函数中发生变化。您可以在选择器中保留一个引用，并使用该引用。

function Foo(elementId, buttonId) {

    /*...*/

    var self = this;
    this.button.addEventListener('click', function(e) {self.bar();}, false);
}

或者一个不需要变量的更现代的解决方案是使用Function.prototype.bind。

function Foo(elementId, buttonId) {

    /*...*/

    this.button.addEventListener('click', this.bar.bind(this), false);
}

.bind 方法返回一个新的bar 函数，其中this 值绑定到您传递的任何内容。在这种情况下，它会绑定到构造函数中的原始this。

【讨论】：

需要注意的是，许多仍然常用的浏览器（例如 IE 8、Safari kangax.github.com/es5-compat-table
var self = this;做到了；我什至不认为“this”可能引用了按钮元素。感谢您的帮助和快速响应。如果可以的话，我会投票，但我还没有代表:)
@Llepwryd：很高兴我能帮上忙。

【解决方案2】：

事件处理程序中的this 是事件被添加到的元素。

要访问外部this，您需要将其存储在单独的变量中。

【讨论】：

【解决方案3】：

点击处理程序中的this是按钮元素而不是对象，使用变量来引用对象，如var self = this;

function Foo(elementId, buttonId) {
    var self = this;
    this.element = document.getElementById(elementId);
    this.button = document.getElementById(buttonId);
    this.bar = function() {dosomething};
    this.button.addEventListener('click', function(e) {self.bar();}, false);
}

【讨论】：