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

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

3 个答案: