javascript - 移除类中定义的 EventListener

Question

我正在尝试删除一个 eventListener，但看起来我错过了什么。

为什么下面的代码不起作用，它没有从按钮中删除事件监听器。

我也试过绑定(bind)这个来传递作用域，但是也没用

class Test {

  eventHandler(e) {
    console.log(e.target.id)
    alert()

    // no effect
    e.target.removeEventListener("click", this.eventHandler)

    // no effect either
    document.getElementById(e.target.id).removeEventListener("click", this.eventHandler)
  }
  constructor() {
    let b = document.getElementById("b")
    b.addEventListener("click", this.eventHandler)

    //b.addEventListener("click", this.eventHandler.bind(this) )
  }
}

new Test()

<button id="b">
click me
</button>

Answer 1

作为事件处理程序的原型(prototype)方法有点问题，特别是当您同时需要绑定(bind)到实例的 this 值和对实际事件处理程序函数的引用时。

默认情况下，事件队列在事件绑定(bind)到的元素的上下文中调用处理程序。更改上下文很容易，但这让您可以创建一个新函数，然后将其用作事件处理程序，并且该函数不再是原型(prototype)中的方法。

如果要保持紧凑的类结构，一种方法是将事件处理程序方法定义为实例自己的属性，它们根本无法被继承。最简单的方法是在构造函数中将方法定义为箭头函数。

class Test {
  constructor() {
    this.eventHandler = e => {
      console.log(e.target.id);
      e.target.removeEventListener("click", this.eventHandler);
    };
    let b = document.getElementById("b");
    b.addEventListener("click", this.eventHandler);
  }
}

new Test();

<button id="b">Click me!</button>

箭头函数保留对其定义的词法环境的引用，事件队列不能覆盖上下文。现在，处理函数中的 this 已正确绑定(bind)到实例，并且 this.eventHandler 引用附加到事件的函数。

在创建自己的属性时使用 bind 是一种内存消耗稍少的选择，如下所示:

class Test {
  constructor() {
    this.eventHandler = this.eventHandler.bind(this);
    let b = document.getElementById("b");
    b.addEventListener("click", this.eventHandler);
  }
  eventHandler (e) {
    console.log(e.target.id);
    e.target.removeEventListener("click", this.eventHandler);
  }
}

这里bind创建了一个新的函数对象，然后调用原型(prototype)中的方法，方法的实际代码没有重复。如果您写道:

this.eventHandler = e => Test.prototype.eventHandler.call(this, e);

值得注意的是，当定义一个与底层原型(prototype)属性具有相同名称的自有属性时，原型(prototype)属性不会被覆盖，它只会隐藏在实例中，并且该类的多个实例仍将按预期工作。

另一种选择是创建您自己的“事件模型”，它为所有事件创建一个包装函数(如上面最后一个代码示例)，并存储对该函数的引用。包装器使用 call 调用实际的处理程序，它可以将所需的 this 值绑定(bind)到事件处理程序。存储的函数引用用于删除事件。 build 这样一个model不是非常复杂，但它提供了有关 this 绑定(bind)和 native 事件模型如何工作的一些知识。