Question

我最近注意到，当回调传递给绑定到另一个对象的addEventListener函数时，稍后调用removeEventListener将无效。

示例：

/* 'this' is referencing e.g. a class */
element.addEventListener('click', this.clickHandler.bind(this))

/* the event listener won't be removed */
element.removeEventListener('click', this.clickHandler)

我找到了一种使用默认函数handleEvent的解决方法，当您将对象传递给addEventListener时，该函数被调用。

/* 'this' is referencing e.g. a class */
element.addEventListener('click', this)

/* the event listener won't be removed */
element.removeEventListener('click', this)

this.handleEvent = function (e) {
  switch(e.type) {
    'click': { 
      this.clickHandler(e);
    }
  }
}

我写了here。

但是，我很好奇为什么会这样？为什么removeEventListener找不到要删除它的eventHandler？

Answer 1

好的，我遗漏的是bind总是返回一个新函数。这意味着我将一个不同的函数传递给removeEventListener，因此无法将其删除。

当回调绑定到另一个对象时，removeEventListener不起作用

1 个答案: