删除已添加绑定的事件侦听器 [英] Removing event listener which was added with bind
问题描述
b $ b
(function(){
//构造函数
MyClass = function(){
this.myButton = document .getElementById(myButtonID);
this.myButton.addEventListener(click,this.clickListener.bind(this));
};
MyClass.prototype。 clickListener = function(event){
console.log(this); //必须是MyClass
};
//公共方法
MyClass.prototype.disableButton = function(){
this.myButton.removeEventListener(click,___________);
};
})();
我可以想到的唯一方法是跟踪每个添加了bind的监听器。 >
以上示例使用此方法:
(function(){
//构造函数
MyClass = function(){
this.myButton = document.getElementById(myButtonID);
this.clickListenerBind = this.clickListener.bind(this );
this.myButton.addEventListener(click,this.clickListenerBind);
};
MyClass.prototype.clickListener = function(event){
console.log(this); //必须是MyClass
};
//公共方法
MyClass.prototype.disableButton = function(){
this。 myButton.removeEventListener(click,this.clickListenerBind);
};
})();
有没有更好的方法?
虽然@machineghost所说的是真实的,但事件被添加和移除的方式相同,方程式的缺失部分是这样的:
在
.bind()
被调用后创建一个新的函数引用!
因此,要添加或删除它,请将引用分配给变量:
var x = this.myListener.bind(this);
Toolbox.addListener(window,'scroll',x);
Toolbox.removeListener(window,'scroll',x);
这对我来说是预期的。
In JavaScript, what is the best way to remove a function added as an event listener using bind()?
Example
(function(){
// constructor
MyClass = function() {
this.myButton = document.getElementById("myButtonID");
this.myButton.addEventListener("click", this.clickListener.bind(this));
};
MyClass.prototype.clickListener = function(event) {
console.log(this); // must be MyClass
};
// public method
MyClass.prototype.disableButton = function() {
this.myButton.removeEventListener("click", ___________);
};
})();
The only way I can think of is to keep track of every listener added with bind.
Above example with this method:
(function(){
// constructor
MyClass = function() {
this.myButton = document.getElementById("myButtonID");
this.clickListenerBind = this.clickListener.bind(this);
this.myButton.addEventListener("click", this.clickListenerBind);
};
MyClass.prototype.clickListener = function(event) {
console.log(this); // must be MyClass
};
// public method
MyClass.prototype.disableButton = function() {
this.myButton.removeEventListener("click", this.clickListenerBind);
};
})();
Are there any better ways to do this?
Although what @machineghost said was true, that events are added and removed the same way, the missing part of the equation was this:
A new function reference is created after
.bind()
is called!
See Does bind() change the function reference? | How to set permanently?
So, to add or remove it, assign the reference to a variable:
var x = this.myListener.bind(this);
Toolbox.addListener(window, 'scroll', x);
Toolbox.removeListener(window, 'scroll', x);
This works as expected for me.
这篇关于删除已添加绑定的事件侦听器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!