javascript - 在构造函数中添加事件监听器

Question

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);

Answer 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从构造函数绑定到原始数​​据。

Answer 2

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

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

Answer 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);
}