addEventListener时使用bind(this)，后面无法用removeEventListener移除

问题

在使用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)