英文:
removeEventListener not removed
问题
我一定是漏看了什么，因为我的事件监听器没有被移除。我创建了一个小的复制示例。我没有使用匿名函数。addEventListener 的签名与 removeEventListener 完全相同。然而，当我触发事件时，我的监听器仍然被触发。
尽管第三个参数在任何现代浏览器中都不是默认的，但出于调试目的，我仍然添加了它，但没有任何区别。
有人可以帮助我吗？我漏掉了什么？
function Foo(){
this.AddComponent();
}
Foo.prototype.AddComponent = function(){
var self = this;
window.addEventListener("OnAdd", self.OnAdd, false);
var ev = new CustomEvent('OnAdd', {
detail: {}
});
window.setTimeout(function(){
console.log('dispatched');
window.dispatchEvent(ev);
}, 1000);
}
Foo.prototype.OnAdd = function(event){
console.log('I was fired!');
var self = this;
window.removeEventListener("OnAdd", self.OnAdd, false);
// 尝试再次触发事件，在理论上不应该起作用
var ev = new CustomEvent('OnAdd', {
detail: {}
});
window.dispatchEvent(ev);
}
new Foo();
请注意，以上是您提供的代码的翻译。如果您有任何其他问题或需要进一步的帮助，请随时告诉我。
英文:
I must be overlooking something as my eventlistener is not removed. I created a small reproduction. I am not using anynomous functions. The signature of the addEventListener is identical to the removeEventListener. Still my listener is still being triggered when I dispatch the event.
Even though the 3rd argument is not default in any modern browser, I still added it for debugging purposes but it didn't make any difference.
Can someone please help me out here. What am I missing?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function Foo(){
this.AddComponent();
}
Foo.prototype.AddComponent = function(){
var self = this;
window.addEventListener("OnAdd",self.OnAdd,false);
var ev = new CustomEvent('OnAdd', {
detail: {}
});
window.setTimeout(function(){
console.log('dispatched');
window.dispatchEvent(ev)
},1000);
}
Foo.prototype.OnAdd = function(event){
console.log('I was fired!');
var self = this;
window.removeEventListener("OnAdd",self.OnAdd,false);
// try to fire again, which in theory should not work
var ev = new CustomEvent('OnAdd', {
detail: {}
});
window.dispatchEvent(ev);
}
new Foo();
<!-- end snippet -->
答案1
得分: 1
以下是代码的翻译部分：
问题在于OnAdd内的this没有绑定到实例。
相同的代码，只是作为ES6 class：
class Foo {
constructor() {
this.OnAdd = this.OnAdd.bind(this);
this.AddComponent();
}
AddComponent() {
var self = this;
window.addEventListener("OnAdd", self.OnAdd, false);
var ev = new CustomEvent('OnAdd', {
detail: {}
});
window.setTimeout(function() {
console.log('dispatched');
window.dispatchEvent(ev)
}, 1000);
}
OnAdd(event) {
console.log('I was fired!');
var self = this;
window.removeEventListener("OnAdd", self.OnAdd, false);
// try to fire again, which in theory should not work
var ev = new CustomEvent('OnAdd', {
detail: {}
});
window.dispatchEvent(ev);
}
}
new Foo();
英文:
The problem is that this inside OnAdd is not bound to the instance.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function Foo(){
this.OnAdd = this.OnAdd.bind(this);
this.AddComponent();
}
Foo.prototype.AddComponent = function(){
var self = this;
window.addEventListener("OnAdd",self.OnAdd,false);
var ev = new CustomEvent('OnAdd', {
detail: {}
});
window.setTimeout(function(){
console.log('dispatched');
window.dispatchEvent(ev)
},1000);
}
Foo.prototype.OnAdd = function(event){
console.log('I was fired!');
var self = this;
window.removeEventListener("OnAdd",self.OnAdd,false);
// try to fire again, which in theory should not work
var ev = new CustomEvent('OnAdd', {
detail: {}
});
window.dispatchEvent(ev);
}
new Foo();
<!-- end snippet -->
Same code, just as an ES6 class:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
class Foo {
constructor() {
this.OnAdd = this.OnAdd.bind(this);
this.AddComponent();
}
AddComponent() {
var self = this;
window.addEventListener("OnAdd", self.OnAdd, false);
var ev = new CustomEvent('OnAdd', {
detail: {}
});
window.setTimeout(function() {
console.log('dispatched');
window.dispatchEvent(ev)
}, 1000);
}
OnAdd(event) {
console.log('I was fired!');
var self = this;
window.removeEventListener("OnAdd", self.OnAdd, false);
// try to fire again, which in theory should not work
var ev = new CustomEvent('OnAdd', {
detail: {}
});
window.dispatchEvent(ev);
}
}
new Foo();
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论