JavaScript事件监听器未正确移除会导致内存泄漏，关键在于DOM移除后监听器仍引用外部变量或闭包；必须用相同函数引用、事件类型和选项调用removeEventListener；匿名函数无法移除；SPA中需在组件卸载时清理；推荐使用once选项或AbortController统一取消。
JavaScript 中事件监听器未正确移除，是导致内存常驻（memory leak）的常见原因。核心问题在于：**DOM 元素被移除后，若其上仍绑定着未清理的事件监听器，而监听器又引用了外部变量或闭包，就可能使整个作用域链无法被垃圾回收**。
确保 removeEventListener 与 addEventListener 参数严格一致
这是最容易被忽略的关键点。`removeEventListener` 必须使用与 `addEventListener` 完全相同的函数引用、事件类型和选项（尤其是 useCapture 和 once）。匿名函数无法被精准移除：
❌ 错误写法（无法移除）：btn.addEventListener('click', () => { console.log('clicked'); });<br>btn.removeEventListener('click', () => { console.log('clicked'); }); // 不生效，函数引用不同
✅ 正确写法（保留引用）：
function handleClick() { console.log('clicked'); }<br>btn.addEventListener('click', handleClick);<br>btn.removeEventListener('click', handleClick); // 可成功移除
立即学习“Java免费学习笔记（深入）”；
在组件卸载或元素销毁时主动清理
尤其在单页应用（SPA）中，如 React、Vue 或自定义模块中，必须在 DOM 移除前清除监听器：
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- React：在 useEffect 的清理函数中调用 removeEventListener
- Vue：在 beforeUnmount 或 unmounted 钩子中清理
- 原生 JS：监听 DOMNodeRemoved 已废弃，应改用 MutationObserver 或显式管理生命周期
- 给动态创建的元素打标记（如
el.__listeners = []），销毁前遍历移除
善用 once 选项和 AbortController（现代推荐）
对只需触发一次的监听，直接用 once: true，浏览器自动清理，无需手动干预：
btn.addEventListener('click', handler, { once: true });
更灵活的方式是使用 AbortController（兼容性良好，Chrome 66+ / Firefox 65+ / Safari 15.4+）：
const controller = new AbortController();<br>btn.addEventListener('click', handler, { signal: controller.signal });<br>// 后续任意时刻可统一取消：<br>controller.abort(); // 自动移除所有关联监听器
适合批量监听、条件性取消、或配合异步流程（如请求取消时同步停掉 UI 监听）。
警惕闭包持有大对象或全局引用
即使监听器被移除了，如果它曾形成闭包并长期持有大型数组、缓存、DOM 集合或全局对象，这些仍不会释放：
- 避免在监听器内直接引用整个组件实例、大型数据结构或 document.querySelectorAll 结果
- 用弱引用（WeakMap/WeakRef）缓存关联数据，不阻碍回收
- 检查 Chrome DevTools 的 Memory > Heap Snapshot，筛选“Detached DOM tree”和“Event listener”对象，定位泄漏源头
