如何删除JavaScript中通过bind()方法添加的事件监听器？

删除使用 Bind() 添加的事件监听器

问题：

在 JavaScript 中，我们如何有效地删除事件监听器使用bind()方法添加？

简介：

bind()方法允许你创建一个具有指定上下文的新函数，将this关键字绑定到一个特定的物体。这通常用于确保事件侦听器调用的方法可以访问正确的上下文。

示例：

考虑以下场景：

(function () {
    // MyClass constructor
    MyClass = function () {
        this.myButton = document.getElementById("myButtonID");
        this.myButton.addEventListener(
            "click",
            this.clickListener.bind(this)
        );
    };

    MyClass.prototype.clickListener = function (event) {
        console.log(this); // Should be MyClass
    };

    // Method to disable the button
    MyClass.prototype.disableButton = function () {
        // Remove the event listener
        this.myButton.removeEventListener(
            "click",
            this.clickListener_________// Placeholder for missing argument
        );
    };
})();

讨论：

一种可能的解决方案是跟踪使用bind()添加的每个监听器，但这种方法很麻烦并且容易出错。

最佳解决方案：

更有效的解决方案是认识到bind()方法创建了一个新的函数引用。因此，要删除监听器，我们需要将引用分配给变量：

const clickListenerBound = this.clickListener.bind(this);
this.myButton.addEventListener("click", clickListenerBound);

然后，禁用按钮时：

this.myButton.removeEventListener("click", clickListenerBound);

以上是如何删除JavaScript中通过bind()方法添加的事件监听器？的详细内容。更多信息请关注PHP中文网其他相关文章！