在类中添加/删除事件侦听器和此上下文

Question

I am trying to conditionally add and remove event listeners on a button when the window is resized. To be able to remove the event listener, it has to be a named function.

The problem is it messes with this context, and therefore this.element in my handle() function is not accessible.

I can bind this and pass it along:

this.button.addEventListener('click', this.handle.bind(this)); 

But then it does not get removed, as it appears to not be the same event listener. Can i pass this differently, or is there some other way to remove event listeners? I have tried to clone the element and replace it, but then the event listener does not get reattached.

As per here: How to remove all listeners in an element?

Here is some simplified code:

export default class Classname {

  constructor(element, button) {
    this.button = button;
    this.element = document.querySelector(element);
    this.resize();
  }

  handle() {
    // do stuff
    console.log(this.element);
  }

  clickEvents() {
    if (condition) {
      this.button.addEventListener('click', this.handle);
    } else {
      this.button.removeEventListener('click', this.handle);
    }
  }

  resize() {
    window.addEventListener('resize', () => {
      this.clickEvents();
    })
  }
}

Answer 1

You can assign the bound handler to a property of the instance, and then pass that bound handler to both addEventListener and, later, removeEventListener :

clickEvents() {
  if (condition) {
    this.boundHandler = this.handle.bind(this);
    this.button.addEventListener('click', this.boundHandle);
  } else {
    this.button.removeEventListener('click', this.boundHandle);
  }
}

Another possibility would be to bind in the constructor instead:

constructor(element, button) {
  this.boundHandler = this.handle.bind(this);
  this.button = button;
  this.element = document.querySelector(element);
  this.resize();
}

Answer 2

You can convert the handle method to an arrow function and then the this will be retained.

  handle = () => {
    // do stuff
    console.log(this.element);
  }