在构造函数中添加事件侦听器

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构造函数的原始.