删除已添加绑定的事件侦听器 [英] 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（）被调用后创建一个新的函数引用！

请参阅 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屋！