什么是事件处理_JavaScript中如何添加和移除事件监听器_技术教程

事件监听器必须用相同函数引用和options才能精准移除，匿名函数无法清除；{once:true}自动卸载；推荐用AbortController统一管理批量监听器。

事件监听器不是“绑定”在元素上就一劳永逸的——添加之后必须能精准移除，否则容易引发内存泄漏或重复触发。

addEventListener 和 removeEventListener 必须用同一个函数引用

这是最常踩的坑：用匿名函数添加，就永远无法移除。

addEventListener 的第二个参数必须是**函数引用**，不能是调用结果（比如 handler()）或匿名函数（比如 () => {}）
removeEventListener 的前两个参数必须与 addEventListener 完全一致：相同类型、相同函数引用、相同 options
如果用了 { once: true }，监听器执行后自动卸载，无需手动移除

const btn = document.getElementById('my-btn');
function handleClick() {
  console.log('clicked');
}
btn.addEventListener('click', handleClick);
// ✅ 可以成功移除
btn.removeEventListener('click', handleClick);
// ❌ 下面这行不会生效，因为是不同函数引用
btn.addEventListener('click', () => console.log('anonymous'));
btn.removeEventListener('click', () => console.log('anonymous')); // 无效

事件监听器的 options 参数影响 removeEventListener 是否生效

capture、once、passive 这些选项不是“附加信息”，而是监听器签名的一部分。移除时漏掉或写错，就匹配不上。

如果添加时用了 { capture: true }，移除时也必须传 { capture: true }
passive 和 once 同理，哪怕只是想移除，也要原样复现
浏览器不会报错，但 removeEventListener 静默失败

const el = document.querySelector('.scrollable');
function onScroll() { /* ... */ }
el.addEventListener('scroll', onScroll, { passive: true });
// ✅ 正确移除
el.removeEventListener('scroll', onScroll, { passive: true });
// ❌ 错误：没传 passive，匹配失败
el.removeEventListener('scroll', onScroll);

用 AbortController 移除一批监听器（现代推荐方式）

当需要批量管理、或在组件销毁/路由切换时统一清理，用 AbortSignal 比手写一堆 removeEventListener 更可靠。

一个 AbortController 实例可控制多个监听器
调用 controller.abort() 后，所有关联监听器自动卸载
兼容性良好（Chrome 88+、Firefox 89+、Safari 15.4+，旧环境可用 polyfill）

const controller = new AbortController();
const signal = controller.signal;
element.addEventListener('click', handler1, { signal });
element.addEventListener('input', handler2, { signal });
element.addEventListener('submit', handler3, { signal });
// 一次性清理全部
controller.abort(); // 所有带该 signal 的监听器立即失效

最容易被忽略的是：移除监听器这件事本身，往往比添加更需要设计——尤其在单页应用中，组件反复挂载/卸载时，不清理或清理不全，会积累大量“幽灵监听器”。别依赖垃圾回收，主动控制才是关键。