事件监听器必须用相同函数引用和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 的监听器立即失效
最容易被忽略的是：移除监听器这件事本身，往往比添加更需要设计——尤其在单页应用中，组件反复挂载/卸载时，不清理或清理不全，会积累大量“幽灵监听器”。别依赖垃圾回收，主动控制才是关键。
