问题
在使用addEventListener
为DOM
元素绑定事件时,使用了bind(this)
来改变函数内的this
指向。然后使用removeEventListener
对事件进行解绑时,发现解绑失败。
原因
假如使用addEventListener
绑定事件时,传递的是匿名函数,那么使用removeEventListener
是无法解绑事件的(没有具体的指向,程序怎么知道要对那个函数进行解绑呢)。而使用bind
方法更改函数内部的this
指向,其实是会返回一个新的函数。所以当我们直接在addEventListener
传参时调用bind
方法(DOM.addEventListener('click', fn.bind(this))
)就会导致我们事实上绑定了一个匿名函数,所以在removeEventListener
时无法解绑相应的函数。
解决方法
在进行事件绑定之前,先用变量记录下bind
方法产生的匿名函数。然后在addEventListener
绑定事件时,传递这个变量作为参数。当解绑时,再传递这个变量进去,就可以顺利解绑了。
function fn () {}
const fnBindCallBack = fn.bind(this) // 关键在这里DOM.addEventListener('click', fnBindCallBack)DOM.removeEventListener('click', fnBindCallBack)