js中addEventListener注册事件用removeEventListener解绑注意事项

最新推荐文章于 2025-11-23 15:58:39 发布

原创最新推荐文章于 2025-11-23 15:58:39 发布 · 1.0k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

本文详细介绍了JavaScript中如何使用addEventListener进行事件绑定，并探讨了为何直接使用匿名函数会导致无法正常解绑事件。通过示例展示了如何正确地绑定和解绑事件，特别是当使用bind创建新函数时，应保存引用以供解绑使用。

注册DOM事件的一种方式：addEventListener


document.addEventListener('mousemove', function() {
	console.log('执行');
});

上述事件绑定，我们是不能通过使用removeEventListener来将其解绑，因为addEventListener的第二个参数是一个匿名函数，所以removeEventListener的第二个参数是获取不到与其同名的函数；要想解绑addEventListener绑定的事件，可以通过下面实现：


function excute() {
	console.log('执行');
}
document.addEventListener('mousemove', excute); // 绑定
document.removeEventListener('mousemove', excute); // 解绑

注意事项：我们在使用的函数中是通过bind绑定的，那么我们在addEventListener的第二个参数需要注意写法：

let obj = {};
function excute() {
	console.log('执行');
}
document.addEventListener('mousemove', excute.bind(obj)); // 绑定
document.removeEventListener('mousemove', excute); // 解绑

上面的写法是不能解绑事件，因为excute.bind(obj)是返回一个新的函数(bind的显示绑定实现就是返回一个新的函数)，我们可以称之为其为匿名函数，那么解绑时候，我们拿不到相同函数名，所以不能解绑，故通过下面方式解绑：

let obj = {};
function excute() {
	console.log('执行');
}
const fn = excute.bind(obj);
document.addEventListener('mousemove', fn); // 绑定
document.removeEventListener('mousemove', fn); // 解绑