CODEWITHSUNDEEP
javascript
Jurudocs
Jurudocs

Reputation: 9165

Removing js event listeners on document from within js class

I have some problems to find the right way to remove event listeners from a document set from within a js class (if that matters at all). I'm sure it's just a small thing but can't find it yet for hours...

Why is removeEventlisteners() not removing the listeners after 6 second?

fiddle: 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()

Upvotes: 0

Views: 39

Answers (2)

Neha Tawar
Neha Tawar

Reputation: 705

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.

Upvotes: 0

marcelwgn
marcelwgn

Reputation: 979

The reason your removeListener is not working is because (evt) => this.notifySomething(evt) creates a new listener, even in the removeEventlisteners function. Because of that, you are unable to remove the listener as the (evt) => this.notifySomething(evt) in addEventlisteners is a different object than the one in removeEventlisteners. The following code works fine:

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/

Upvotes: 2

Related Questions