JavaScript事件监听器注销需用removeEventListener配合同一函数引用，匿名/箭头函数因引用不同而失效；推荐使用once选项自动清理、AbortController批量注销，并在合适生命周期及时解绑以防内存泄漏。
JavaScript 中事件监听函数的注销，关键在于使用 removeEventListener 配合与添加时**完全一致**的函数引用，否则无法成功移除，导致内存无法释放。
必须用同一个函数引用
匿名函数或箭头函数每次定义都是新对象，无法被正确移除：
- ❌ 错误写法（监听器永远残留）：
btn.addEventListener('click', () => { console.log('hello'); });
btn.removeEventListener('click', () => { console.log('hello'); }); // 不生效！
- ✅ 正确写法（保存引用再移除）：
const handleClick = () => console.log('hello');
btn.addEventListener('click', handleClick);
// ……后续需要时
btn.removeEventListener('click', handleClick); // 成功移除
使用 once 选项自动清理
如果监听器只需触发一次，直接用 { once: true } 选项，浏览器会在执行后自动注销，无需手动干预：
btn.addEventListener('click', () => {
console.log('只执行一次');
}, { once: true }); // 执行完自动解绑，无内存泄漏风险
用 AbortController 实现批量可控注销
现代浏览器支持通过 AbortSignal 统一管理多个监听器，适合组件卸载、页面切换等场景：
立即学习“Java免费学习笔记（深入）”；
const controller = new AbortController();
btn.addEventListener('click', handler1, { signal: controller.signal });
btn.addEventListener('mouseover', handler2, { signal: controller.signal });
// 一键注销所有关联监听器
controller.abort(); // 触发后，两个监听器都自动移除
注意移除时机和作用域
确保在合适的生命周期中注销，比如 Vue 的 beforeUnmount、React 的 useEffect 清理函数、或原生 DOM 元素被移除前：
- 监听器绑定在全局或长期存在的对象上，但对应逻辑已失效，却未解绑 → 内存泄漏
- 监听器内闭包引用了大量数据（如整个组件实例），又没及时解绑 → 数据无法被 GC 回收
- 动态创建的元素，需在元素
remove()前手动解绑，或用事件委托避免直接绑定
