How to store a reference to an anonymous event listener?

Question

I'm not sure how I can store a reference to an anonymous event listener, so I can remove it at a later point.

This: Removing an anonymous event listener2 haven't helped me.

   class Dragable
    {
        constructor(gameObject)
        {
            //Store reference to the event handler.
            document.addEventListener('mousedown', (mouseEvent) => this.click(mouseEvent));

        }

        click(mouseEvent)
        {
            console.log("Clicking..");
            //Remove eventhandler by reference.
        }
     }

score 2 · Answer 1 · answered Jul 19 '18 at 10:48

2

Store the reference before you pass it to the function. Then use it everywhere you need it.

this.listener = (mouseEvent) => this.click(mouseEvent)
document.addEventListener('mousedown', this.listener);

answered Jul 19 '18 at 10:48

Quentin

914,110
126
1,211
1,335

@JaromandaX — You *can*, but it's overly complicated and hard for maintainers to read. Don't mix assignment and argument passing in the same expression. – Quentin Jul 19 '18 at 11:00

ZER0 · Accepted Answer · 2018-07-19T12:13:01.350

I believe the reason because you want to do that, it's to keep this pointing to your object instance, instead of document, is that correct?

In this case, you can actually do several thing.

1) Just store the reference of the function in your object:

   class Dragable {
     constructor(gameObject) {
       this._listener = (mouseEvent) => this.click(mouseEvent);
       document.addEventListener('mousedown', this._listener)
     }

     click(mouseEvent) {
       console.log("Clicking..");
       //Remove eventhandler by reference.
      }

      destroy() {
        document.removeEventListener('mousedown', this._listener)
      }
  }

Also, if you're in a module, you can encapsulate _listener as private symbol in order to do not make it accessible easily from the outside.

2) Use a static "click" handler, then you bound to the instance:

  class Dragable {
    constructor(gameObject) {
      this.click = Dragable.click.bind(this);
      document.addEventListener('mousedown', this.click)
    }

    static click(mouseEvent) {
      console.log("Clicking..");
      //Remove eventhandler by reference.
     }

     destroy() {
       document.removeEventListener('mousedown', this.click)
     }
  }

(You could also avoid static and just have this.click = this.click.bind(this) but I don't like overriding like that, but that's a personal taste)

3) You can use an event handler object instead of a function:

  class Dragable {
    constructor(gameObject) {
      document.addEventListener('mousedown', this);
    }


    handleEvent(mouseEvent) {
      console.log("Clicking..");
      //Remove eventhandler by reference.
     }

     destroy() {
       document.removeEventListener('mousedown', this)
     }
  }

Using handleEvent, inside this.click the this will point to your object instance and not document: notice that if you have multiple events to subscribe, you have to use a switch(event.type) to delegate to the right method. More info about it: https://developer.mozilla.org/en-US/docs/Web/API/EventListener/handleEvent

How to store a reference to an anonymous event listener?

2 Answers2