怎样用JavaScript移除事件监听器
在JavaScript开发中，我们经常会为DOM元素添加事件监听器来响应用户操作，但有些场景下也需要移除已经添加的事件监听器，比如避免重复触发、释放资源或者销毁组件时清理事件绑定。接下来就详细介绍移除事件监听器的正确方法。
基础方法：removeEventListener
移除事件监听器最核心的方法是removeEventListener，它需要和添加事件时使用的addEventListener参数完全对应才能生效，这是很多开发者容易踩坑的地方。
removeEventListener的语法和addEventListener一致，接收三个参数：
- 第一个参数是事件类型，比如
click、mouseover，注意不需要加on前缀 - 第二个参数是要移除的事件处理函数，必须和添加时的函数是同一个引用
- 第三个参数是可选的配置对象或者布尔值，必须和添加时的参数完全一致
正确移除的示例
首先看一个正确的移除示例，这里添加和移除使用的是同一个函数引用，参数也完全匹配：
// 定义事件处理函数
function handleClick() {
console.log('按钮被点击了');
}
// 获取按钮元素
const btn = document.querySelector('#testBtn');
// 添加点击事件监听器，第三个参数使用默认false（冒泡阶段触发）
btn.addEventListener('click', handleClick, false);
// 后续需要移除时，传入相同的参数
// 注意函数必须是同一个引用，不能写新的匿名函数
btn.removeEventListener('click', handleClick, false);上面的代码中，添加和移除时都使用了handleClick这个同一个函数，第三个参数也保持都是false，因此可以成功移除事件监听器。
常见错误场景
很多开发者移除事件失败，大多是因为以下两种情况：
1. 使用匿名函数添加事件
如果添加事件时使用的是匿名函数，那么移除时无法拿到相同的函数引用，就会导致移除失败：
const btn = document.querySelector('#testBtn');
// 添加时使用匿名函数，没有保存函数引用
btn.addEventListener('click', function() {
console.log('点击了按钮');
}, false);
// 移除时写新的匿名函数，和添加时的函数不是同一个引用，无法移除
btn.removeEventListener('click', function() {
console.log('点击了按钮');
}, false);这种情况下，两次的匿名函数虽然代码一样，但在内存中是不同的函数对象，因此removeEventListener无法找到要移除的监听器，移除操作无效。
2. 参数不匹配
添加和移除时的第三个参数不一致，也会导致移除失败，比如添加时用对象配置，移除时用布尔值，或者捕获/冒泡阶段参数不一致：
const btn = document.querySelector('#testBtn');
function handleClick() {
console.log('点击');
}
// 添加时使用配置对象，指定捕获阶段触发
btn.addEventListener('click', handleClick, { capture: true });
// 移除时使用布尔值true，和添加时的配置对象不匹配，无法移除
btn.removeEventListener('click', handleClick, true);特殊情况：内联事件处理
如果是通过HTML的onclick这类属性添加的内联事件，比如<button onclick="handleClick()">，这种情况不需要用removeEventListener，直接把对应的属性设为null即可：
const btn = document.querySelector('#testBtn');
// 移除内联的onclick事件
btn.onclick = null;不过内联事件耦合性较高，实际开发中更推荐使用addEventListener来添加事件，方便统一管理和移除。
注意事项
- 如果同一个事件添加了多个不同的处理函数，移除时只会移除对应函数的那个监听器，其他的不受影响
- 如果事件监听器已经被移除过一次，再次调用
removeEventListener不会报错，只是无任何效果 - 在组件销毁、页面卸载的场景下，建议主动清理所有添加过的事件监听器，避免内存泄漏