JavaScript事件监听器不手动移除几乎必然导致内存泄漏，尤其在单页应用中；闭包引用使DOM节点和JS对象无法被GC回收；推荐用AbortController.signal自动解绑，手动移除需确保函数引用一致。
JavaScript 事件监听器不手动移除，几乎必然导致内存泄漏——尤其在单页应用、动态 DOM 操作或长期存活的对象中。
事件监听器没被移除，DOM 节点就无法被 GC
当给一个 DOM 元素添加 addEventListener，且监听函数是闭包（比如引用了外部变量、组件实例或 Promise 状态），浏览器会维持对该元素及其作用域链的强引用。即使该元素已被 removeChild 或 innerHTML = '' 移除，只要监听器还在，它和关联的 JS 对象就都驻留在内存里。
- 典型场景：Vue/React 组件卸载前没调用
removeEventListener，或没使用AbortController配合signal选项 - 容易被忽略：通过事件委托绑定在
document或body上的监听器，生命周期常被误认为“全局安全”，实则更难追踪清理 - 验证方式：Chrome DevTools → Memory → “Take heap snapshot”，筛选 Detached HTMLDivElement，查看 retainers 中是否有 EventListener
用 AbortController.signal 自动解绑（现代推荐）
ES2021+ 支持为 addEventListener 传入 { signal } 选项，controller.abort() 会自动移除所有关联监听器，无需记住函数引用。
const controller = new AbortController();
element.addEventListener('click', handler, { signal: controller.signal });
// 后续某处（如组件 unmount）
controller.abort(); // ✅ 自动清理，无需保存 handler 引用
- 优势：避免闭包捕获
handler导致的引用滞留；适合异步流程控制 - 注意：
signal不支持 IE 和旧版 Safari；若需兼容，必须回退到手动移除 + 函数引用保存 - 不适用于需要多次重绑又复用同一
handler的场景（因为abort()后无法再用该signal）
手动移除时，必须用同一个函数引用
removeEventListener 不识别函数体内容，只比对函数引用地址。用匿名函数或箭头函数绑定，等于每次创建新函数，removeEventListener 完全无效。
立即学习“Java免费学习笔记（深入）”；
// ❌ 错误：两次是不同函数
btn.addEventListener('click', () => console.log('ok'));
btn.removeEventListener('click', () => console.log('ok')); // 不生效
// ✅ 正确：保存引用
const handleClick = () => console.log('ok');
btn.addEventListener('click', handleClick);
btn.removeEventListener('click', handleClick); // 成功移除
- 类方法绑定也需注意：
this.handleClick在类字段写法（handleClick = () => {}）下是稳定引用；但若用普通方法handleClick() {}，绑定时需btn.addEventListener('click', this.handleClick.bind(this))，此时bind每次返回新函数，仍无法移除 - 建议：优先用类字段箭头函数，或在构造函数中绑定一次并复用
动态节点 + 事件委托？别忘了清理委托监听器本身
用 document.addEventListener('click', delegateHandler) 做事件委托很常见，但很多人以为“只绑一次就没事”。实际上，如果 delegateHandler 内部闭包持有已销毁组件的 this 或状态，泄漏照旧发生。
- 解决方案：委托监听器本身也要配合
AbortController或明确在组件销毁时removeEventListener - 更稳妥做法：把委托逻辑封装进可销毁对象（例如自定义 Hook 或 Class），销毁时统一 abort 或移除
- 警惕第三方库：某些 UI 库内部绑定的全局事件（如
resize、scroll）未提供清理 API，需查文档或自行 patch
最隐蔽的泄漏往往不在显式绑定处，而在监听函数内部无意捕获的长生命周期对象——比如缓存、全局状态管理器实例、未释放的定时器，或者被监听元素父级容器的引用。清理监听器只是起点，得顺着引用链一路看下去。
