trouble removing EventListeners from the listener

Question

In my JS module I have a function that adds a couple event listeners

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

and the function clickCatcherFunction is called, all good so far. Now it's time to remove all the event listeners if one of them triggered.

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

No errors, but the event listeners are still active. How do I access the same function that I passed in? Inside the listener function, this.someOtherFunc also fails. What's the scope of this listener, has it changed?

Edit. Adding more for context:

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();

Adding solution into constructor.

if `clickCatcherFunction()` is global it would work; but only if the all the add and remove calls also happen in the global context. — DarkPurple141, Mar 27 '19 at 05:23
use the `that=this` trick, or bind() your callback to get the right refs. — dandavis, Mar 27 '19 at 05:41
Duplicate of [es6 classes and "this" with event handlers](https://stackoverflow.com/questions/32893600/es6-classes-and-this-with-event-handlers) (unfortunately already broke my Mjölnir on previous version of the question..) — Kaiido, Mar 27 '19 at 06:49

DarkPurple141 · Accepted Answer · 2019-03-27T06:08:58.280

1

You need to call .removeEventListener for every call you've made in adding it.

So from your code:

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

Mind, I'd be careful about pointing to this the way you are. this will be the enclosing object of the context you're calling is. Which may not be what you want.

Based on your edit:

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

Will help.

edited Mar 27 '19 at 06:08

answered Mar 27 '19 at 05:17

DarkPurple141

280
2
9

using .bind(this) with addEventListener enabled that function to reference other functions with this.other. But didn't remove the eventlisteners from window or document. But if I put a this.listener = this.listener.bind(this) in the constructor, I could use it to add and remove. – Mark Mar 27 '19 at 07:18
Yeah, because .bind returns a function. – DarkPurple141 Mar 27 '19 at 09:43

trouble removing EventListeners from the listener

1 Answers1