javascript - 无法删除热模块替换时的监听器

Question

我正在注册一个处理程序(用于单击事件)。在注册处理程序之前，我清除了相同的处理程序，以免注册两个相同的处理程序。

我正在使用 Webpack 的热模块替换。每次我更改 JavaScript 源代码中的某些内容时，注册处理程序的部分代码都会重新运行。

但是，处理程序永远不会被删除。

export default class TaskHandlers {
    // Called from index.js
    registerAddTaskClick(addTaskElementId) {
        let element = document.querySelector(`#${addTaskElementId}`);
        if (element !== null) {
            // Never clears the handler
            element.removeEventListener('click', this.handleAddTaskClick);
            // Keeps piling on new handlers on every HMR.
            element.addEventListener('click', this.handleAddTaskClick);
        }
    }

    handleAddTaskClick(event) {
        console.log('Clicked');
    }
}

如果我手动运行 element.removeEventListener()，则只会删除最后一个处理程序。

Answer 1

保存对函数的引用，以便删除要添加的同一函数，您还需要 .bind(this)。

export default class TaskHandlers {
    constructor() {
        this.element = document.querySelector(`#${addTaskElementId}`);
        this.handleAddTaskClick = this.handleAddTaskClick.bind(this);
    }

    // Called from index.js
    registerAddTaskClick(addTaskElementId) {
        if (this.element !== null) {
            this.element.addEventListener('click', this.handleAddTaskClick);
        }
    }

    handleAddTaskClick(event) {
        this.element.removeEventListener('click', this.handleAddTaskClick);
        console.log('Clicked');
    }
}

更新: 还要在单击元素时而不是之前删除该元素，以便您知道它已经绑定(bind)了监听器。

一个可能有效的解决方案(如果确实需要在使用 HMR 更改代码后保留实例)是将处理程序保存在窗口对象或不属于窗口对象的全局变量中刷新的模块，它并不理想，但可能会为您解决问题，因为这是一个异常(exception)情况。