从 js class 中删除文档上的 js 事件侦听器

Question

我有一些问题要找到从 js class 中的文档集中删除事件侦听器的正确方法（如果这很重要的话）。 我敢肯定这只是一件小事，但几个小时都找不到...

为什么 removeEventlisteners() 在 6 秒后没有删除监听器？

小提琴： https://jsfiddle.net/5w0qvcjg/1/

class SomeClass{
    constructor() {
            // init evt listeners
        this.addEventilisteners();
        setTimeout(()=>{
            // remove evt listeners after 6 sec
            this.removeEventlisteners()
        },6000)

    }
    addEventilisteners(){
        document.addEventListener("mousemove",(evt)=>this.notifySomething(evt), false);
        document.addEventListener("mousedown", (evt)=>this.notifySomething(evt), false);
        document.addEventListener("keypress", (evt)=>this.notifySomething(evt), false);
        document.addEventListener("touchmove", (evt)=>this.notifySomething(evt), false);

    }
    notifySomething(){
        console.log("some acitvity")
    }
    removeEventlisteners(){
        document.removeEventListener("mousemove",(evt)=>this.notifySomething(evt), false);
        document.removeEventListener("mousedown", (evt)=>this.notifySomething(evt), false);
        document.removeEventListener("keypress", (evt)=>this.notifySomething(evt), false);
        document.removeEventListener("touchmove", (evt)=>this.notifySomething(evt), false);
    } 

 }
const inita = new SomeClass()

Answer 1

您的 removeListener 不起作用的原因是(evt) => this.notifySomething(evt)创建了一个新的侦听器，即使在removeEventlisteners function 中也是如此。 因此，您无法删除侦听器，因为addEventlisteners中的(evt) => this.notifySomething(evt)与removeEventlisteners中的 object 不同。 以下代码工作正常：

class SomeClass{
    constructor() {
        // init evt listeners
        this.addEventilisteners();
        setTimeout(()=>{
            // remove evt listeners after 6 sec
            this.removeEventlisteners()
        },6000)

    }
    addEventilisteners(){
        document.addEventListener("mousemove",this.notifySomething, false);
        document.addEventListener("mousedown", this.notifySomething, false);
        document.addEventListener("keypress", this.notifySomething, false);
        document.addEventListener("touchmove", this.notifySomething, false);

    }
    notifySomething(evt){
        console.log("some acitvity");
    }
    removeEventlisteners(){
        document.removeEventListener("mousemove",this.notifySomething, false);
        document.removeEventListener("mousedown", this.notifySomething, false);
        document.removeEventListener("keypress", this.notifySomething, false);
        document.removeEventListener("touchmove", this.notifySomething, false);
    }
}
const inita = new SomeClass()

JSFiddle： https://jsfiddle.net/chingucoding/ujcxmkf0/12/

Answer 2

To remove event handlers, the function specified with the addEventListener() method must be an external, "named" function, like in the example above create a function for eac event listener with name instead of (evt)=>this.notifySomething(evt).

Anonymous functions, like "document.removeEventListener("event", (evt)=>this.notifySomething(evt));" will not work.