我最近注意到,当回调传递给绑定到另一个对象的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);
}
}
}
我在这里写过。
但是,我很好奇为什么会这样?为什么removeEventListener
找不到要删除它的事件处理程序?
好的,我缺少的是bind
总是返回一个新函数。这意味着我正在将不同的函数传递给removeEventListener
因此它找不到它来删除它。