從 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.