小编典典

删除使用绑定添加的事件侦听器

all

在 JavaScript 中,使用 bind() 删除作为事件侦听器添加的函数的最佳方法是什么?

例子

(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", ___________);
    };

})();

我能想到的唯一方法是跟踪每个添加了绑定的侦听器。

上面这个方法的例子:

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

})();

有没有更好的方法来做到这一点?


阅读 65

收藏
2022-07-01

共1个答案

小编典典

尽管@machineghost 说的是真的,添加和删除事件的方式相同,但等式中缺少的部分是:

调用后会创建一个新的函数引用.bind()

因此,要添加或删除它,请将引用分配给变量:

var x = this.myListener.bind(this);
Toolbox.addListener(window, 'scroll', x);
Toolbox.removeListener(window, 'scroll', x);

这对我来说按预期工作。

2022-07-01