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

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

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

，需要将其存储在单独的变量中。

单击处理程序中的this

是按钮元素而不是对象，请使用变量引用对象，如

var self=this

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

您的
此
值在构造函数中更改。您可以在选择器中保留引用，并使用该引用

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


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

function Foo(elementId, buttonId) {

    /*...*/

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

.bind
方法返回一个新的
bar
函数，该函数的
值绑定到您传递给它的任何对象。在这种情况下，它绑定到构造函数中的原始
this
。
需要注意的是，许多浏览器仍然常用（例如，IE 8，Safari var self=this；That it it；我甚至不认为“this”可能是指按钮元素。感谢您的帮助和快速响应。如果可以，我会投票，但我还没有代表：）@Llepwryd:很高兴我能帮上忙。
function Foo(elementId, buttonId) {

    /*...*/

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