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);
发布于 2012-10-04 16:23:38
您的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
。
发布于 2012-10-04 16:23:09
事件处理程序中的this
是向其中添加事件的元素。
要访问外部this
,需要将其存储在单独的变量中。
发布于 2012-10-04 16:23:30
单击处理程序中的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);
}
https://stackoverflow.com/questions/12731528
复制相似问题