removeEventListener 在类 JavaScript 中不起作用

当使用类来包装 JavaScript 中的代码时，可能会遇到使用 removeEventListener 方法无效的情况。本文将探讨这个问题的原因以及如何解决。

原因

在类中绑定事件处理程序并不像在普通的 JavaScript 代码中那样简单。当使用箭头函数或在构造函数中使用 bind() 方法来绑定事件处理程序时，可能会出现问题。这是因为在这些情况下，绑定的函数的引用与添加到监听器列表中的函数的引用不相同，从而导致 removeEventListener 无法正确地删除该事件处理程序。

解决方案

为了正确地使用 removeEventListener 方法，应该将事件处理程序的引用存储为类的属性，以便在需要时能够访问它们。以下是一个示例：

class MyClass {
  constructor() {
    this.handleEvent = this.handleEvent.bind(this);
    this.button = document.querySelector('button');
    this.button.addEventListener('click', this.handleEvent);
  }

  handleEvent(event) {
    console.log('Button clicked!');
  }

  removeEventListeners() {
    this.button.removeEventListener('click', this.handleEvent);
  }
}

在这个例子中，事件处理程序的引用是存储在 handleEvent 方法中的。当需要删除事件监听器时，可以调用 removeEventListeners 方法来执行此操作。

另一种解决方案是使用 once 选项来添加事件监听器。这将确保在绑定的处理程序被调用后，它将自动从侦听器列表中删除。以下是一个示例：

class MyClass {
  constructor() {
    this.button = document.querySelector('button');
    this.button.addEventListener('click', this.handleEvent, { once: true });
  }

  handleEvent(event) {
    console.log('Button clicked!');
  }
}

在这个例子中，{ once: true }选项告诉浏览器只要调用一次事件处理程序，就会自动删除它。

综上所述，存储事件处理程序的引用并在需要时使用 removeEventListener 方法是正确的方法来处理事件监听器。使用 once 选项可以是另一个方便的选择，但这不适用于所有情况。