Remove eventlistener

Help:-) How do i remove this listener?

this.overlay.addEventListener('click', this._handlePlay.bind(this));

_handlePlay looks like this:

_handlePlay() {
    this._isOpen = !this._isOpen;
  }

i tried…

this.overlay.removeEventListener('click', this._handlePlay.bind(this));

and more desperately:

this.overlay.removeEventListener('click', this._handlePlay());

but the listener wont leave the scene?

I have the bind as I am in js and web component context

/regards

Answer

The function you pass to removeEventListener needs to be the same function that you pass to addEventListener.

bind creates a new function.

this.overlay.addEventListener('click', this._handlePlay.bind(this));

Since you don’t keep the value of this._handlePlay.bind(this), there’s no way to get that function back to pass it to removeEventListener.

---

You need to keep the value somewhere that you can access when you later try to remove the event listener.

const boundHandlePlay = this._handlePlay.bind(this);
this.overlay.addEventListener('click', boundHandlePlay);
this.overlay.removeEventListener('click', boundHandlePlay);