Question

我正在尝试在调整窗口大小时有条件地在按钮上添加和删除事件侦听器。为了能够删除事件侦听器，它必须是一个命名函数。

问题是它与this上下文混乱，因此无法访问我的this.element函数中的handle()。

我可以绑定this并将其传递：

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

但是它并没有被删除，因为它似乎不是同一事件侦听器。我可以通过不同的方式传递this，还是可以通过其他方法删除事件监听器？我试图克隆元素并替换它，但随后事件监听器没有重新连接。

按照此处：How to remove all listeners in an element?

这是一些简化的代码：

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

您可以将绑定处理程序分配给实例的属性，然后将该绑定处理程序传递给.env和以后的addEventListener：

removeEventListener

另一种可能性是绑定在构造函数中：

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

Answer 2

您可以将handle方法转换为箭头函数，然后保留this。

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

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

2 个答案: