spa中清理废弃事件监听的核心是：谁注册谁销毁、生命周期绑定解绑同步、避免长生命周期对象持有短生命周期组件引用；组件卸载前须显式移除监听，监听函数需同一引用，推荐用abortcontroller或事件委托优化，警惕全局引用泄漏，并借助devtools和eslint等工具辅助检测。
在复杂单页应用（SPA）中，清理废弃事件监听的核心是：**谁注册，谁负责销毁；生命周期绑定，解绑同步执行；避免全局或长生命周期对象持有短生命周期组件的引用**。
组件卸载时主动移除监听
React、Vue 或自定义组件在销毁前（如 useEffect cleanup、beforeUnmount、disconnectedCallback）必须显式调用 removeEventListener。注意监听函数必须是同一个引用，不能用匿名函数或箭头函数直接注册。
- ✅ 正确写法：将监听函数声明为模块级或组件级变量，确保注册和移除使用同一函数引用
- ❌ 错误写法：
element.addEventListener('click', () => {...})—— 每次创建新函数，无法精确移除 - ? 小技巧：用
AbortController.signal配合addEventListener({ signal })（现代浏览器支持），可在任意时刻中止所有相关监听
用事件委托减少监听数量
对动态增删的子元素（如列表项、弹窗内容），不要给每个子节点单独绑定事件。改用父容器监听 + 事件冒泡判断目标，既减少监听器数量，也规避了频繁增删导致的清理遗漏。
- 例如：给
#list绑定一次click，通过e.target.matches('.item-delete')判断是否点击删除按钮 - 这样即使列表项被 Vue/React 重渲染，也不需要反复 add/remove 监听器
- 注意：委托监听本身也要在父容器销毁时清理（比如组件卸载时移除父容器上的委托监听）
警惕全局/长生命周期对象的隐式引用
定时器、window、document、ResizeObserver、MutationObserver 等常被组件意外长期持有，导致组件无法 GC，监听持续存在。
- 所有通过
window.addEventListener注册的监听，必须在组件卸载时对应移除 - 使用
ResizeObserver时，记得调用unobserve()和disconnect() - 避免在类实例中保存未清理的 observer 或 timer ID；可统一在
destroy()方法中集中清理
借助工具辅助发现泄漏
人工检查易遗漏，可用浏览器 DevTools 的 Memory 面板录制堆快照，筛选 EventListener 对象，结合 retainers 查看谁在持有它；也可用 performance.memory 或 chrome://memory-internals 观察 JS 堆增长趋势。
- 开发阶段开启 ESLint 插件
eslint-plugin-react-hooks（检查 effect 清理）、eslint-plugin-no-add-event-listener（限制无清理的监听） - 对关键模块添加单元测试，断言组件挂载/卸载后
window.eventListeners数量不变（需 mock 或辅助工具）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
