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

yeeeee!

于 2023-11-30 16:33:10 发布

阅读量817

点赞数 9

文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_43130844/article/details/134715899

版权

文章讨论了在JavaScript中，如何在使用bind(this)改变事件处理函数的this指向后，正确地在removeEventListener中解绑该函数。关键在于理解bind返回的新函数以及如何提前存储它以便于后续解绑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题

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