CODEWITHSUNDEEP
javascriptreactjs
Vash
Vash

Reputation: 186

EventListener does not get removed on function call

When routing to a different page the eventListener should be removed but it is not. Might there be any reason this is happening? The function is getting called.

componentDidMount() {
    window.document.addEventListener("keydown", (e) => {
        Resultaat(e.keyCode)
    })
}

componentWillUnmount() {
    window.document.removeEventListener("keydown", () => { })
}

Upvotes: 0

Views: 68

Answers (4)

t1m0thy
t1m0thy

Reputation: 2786

You need to pass the SAME FUNCTION to removeEventListener as you passed to addEventListener.

Declare the listener separately, you can then pass it to both. This is not the place to be using anonymous functions :)

var fn = (e) => Resultaat(e.keyCode)

window.document.addEventListener("keydown", fn)

window.document.removeEventListener("keydown", fn)

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

and

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener

are helpful...

Upvotes: 0

ibtsam
ibtsam

Reputation: 1720

When you add add/remove an event listener, you need to provide the same function you can do this 

componentDidMount() {
 window.document.addEventListener("keydown", this.handleKeyDown)
}

than remove it like 

componentWillUnmount() {
 window.document.removeEventListener("keydown", this.handleKeyDown)
}

You can't pass anonymous function to window event listener

Hope it helps

Upvotes: 1

noa-dev
noa-dev

Reputation: 3641

You are trying to unbind a different method from the click event, than previously assigned. You can imagine as your anonymous function in the addEventListener method to point to a function called fn1 and then you are trying to unassign a different function fn2 from same eventListener. Therefore it doesn't remove the correct one.

Look at this example I provided for you:

https://jsfiddle.net/13oafx9b/

const button1 = document.getElementById('button');
const button2 = document.getElementById('button2');

function logSomething() {
    console.log('clicked');
}

button1.addEventListener('click', logSomething);

button2.addEventListener('click', () => {
    button1.removeEventListener('click', logSomething);
})

By creating a named function you end up with a memory pointer towards the reference of the function "logSomething" and use the exact same one to de-tach it again.

edit

In your comment you are creating another anonymous function e => { Resultaat(e.keyCode); } hence you end up without reference to it. If you call it directly like doc.addEventListener("keydown", Resultaat); }); you get the e passed down as first parameter to Resultaat where you can handle the logic for it. If you want to keep it like it was, with calling Resultaat with the e.keyCode event you have to wrap it in a named function ..

doc.addEventListener("keydown", printKeyCode); });

function printKeyCode(e) {
  Resultaat(e.keyCode);
}

Once again: e => { Resultaat(e.keyCode); } creates an anonymous unnamed function which cant be detached from the eventlistener since there is no reference to it from the removeEventListener function.

Upvotes: 0

Alon Yampolski
Alon Yampolski

Reputation: 849

When removing the event listener you should pass on the same instance of the listener as you gave when setting it, i.e.:

var thisIsMyListener = (e) => {
        Resultaat(e.keyCode)
    };

componentDidMount() {
    window.document.addEventListener("keydown", thisIsMyListener)
}

componentWillUnmount() {
    window.document.removeEventListener("keydown", thisIsMyListener)
}

Since in JS a function is also an object, you should always provide the same instance of it.

Also, () => {} is stating an anonymous function which always produces a new instance of this function.

Upvotes: 0

Related Questions