从侦听器中删除 EventListener 时遇到问题

Question

在我的 JS 模块中，我有一个添加几个事件监听器的函数

clickCatcher.addEventListener("click", this.clickCatcherFunction);
window.addEventListener('resize', this.clickCatcherFunction);
document.addEventListener('keydown', this.clickCatcherFunction);

并且调用了函数clickCatcherFunction，到目前为止一切都很好。现在是时候删除所有事件侦听器（如果其中一个触发了）。

document.removeEventListener('keydown', this.clickCatcherFunction);

没有错误，但事件侦听器仍处于活动状态。如何访问我传入的相同功能？在侦听器函数内部， this.someOtherFunc 也失败了。这个监听器的范围是什么，它有变化吗？

编辑。为上下文添加更多内容：

export default class Hints {

    constructor(){
        //ref for adding and removing
        this.clickCatcherFunction = this.clickCatcherFunction.bind(this);

        //add invisible top div to catch click and remove hint, 
        const clickCatcher = document.createElement("div"); 
        clickCatcher.id = "clickCatcher";
        document.body.appendChild(clickCatcher);
        clickCatcher.addEventListener('click', this.clickCatcherFunction);
        window.addEventListener('resize', this.clickCatcherFunction);
        document.addEventListener('keydown', this.clickCatcherFunction);
    }

    clickCatcherFunction() {
        //clickCatcher gets deleted from the dom
        document.removeEventListener('keydown', this.clickCatcherFunction);
        window.removeEventListener('resize', this.clickCatcherFunction);
    }
}


//in the JS that imported Hints.JS
import Hints from "../Hints.js"
let hint = new Hints();

将解决方案添加到构造函数中。

Answer 1

在添加时，您每次拨打电话都需要拨打.removeEventListener。

所以从你的代码：

clickCatcher.removeEventListener('click', this.clickCatcherFunction);
window.removeEventListener('resize', this.clickCatcherFunction);
document.removeEventListener('keydown', this.clickCatcherFunction);

请注意，我会小心指向 this 的方式。 this 将是您正在调用的上下文的封闭对象。这可能不是你想要的。

根据您的编辑：

document.addEventListener('keydown', this.clickCatcherFunction.bind(this));

会有所帮助。