组件销毁时必须主动清理事件监听器，否则闭包引用和全局监听会持续持有 DOM 节点与 JS 对象，导致内存无法回收；需用同一函数引用及相同 options 实例配对 add/remove，推荐使用 AbortController.signal 一键批量清除。
组件销毁时必须主动清理事件监听器，否则闭包引用和全局监听会持续持有 DOM 节点与 JS 对象，导致内存无法回收——页面变卡、堆内存只增不减，是单页应用中最隐蔽也最普遍的泄漏源头。
用同一函数引用配对绑定与解绑
removeEventListener 不比对函数内容，只认内存地址。匿名函数或箭头函数每次都是新实例，解绑必然失效：
- ❌ 错误写法：
el.addEventListener('click', () => handle())→ 后续removeEventListener找不到原函数 - ✅ 正确做法：声明具名函数或变量，复用同一引用
const handleClick = () => { /* ... */ };el.addEventListener('click', handleClick);el.removeEventListener('click', handleClick);
带选项的监听必须复用 options 实例
传了 { capture: true }、{ passive: true } 或自定义配置时，removeEventListener 要求传入的是**同一个对象实例**，不是“长得一样”：
- ❌ 错误：
addEventListener('scroll', h, { capture: true })，再用removeEventListener('scroll', h, { capture: true })→ 新建对象，不匹配 - ✅ 正确：提前定义常量
const opts = { capture: true };，绑定和解绑都用它
优先用 AbortController.signal 自动批量清理
现代浏览器（Chrome/Firefox/Safari 15.4+）支持 signal 选项，一行 controller.abort() 即可清除所有关联监听，无需保存 handler 引用，也不怕闭包滞留：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
- 绑定时：
const controller = new AbortController();el.addEventListener('click', handler, { signal: controller.signal }); - 组件卸载时：
controller.abort();→ 所有该 signal 的监听器立即失效 - 天然适配框架清理时机：React 的
useEffect返回函数、Vue 的onBeforeUnmount、Web Component 的disconnectedCallback
特别注意委托监听与全局监听
绑在 document、window 或滚动容器上的监听器，不会随组件 DOM 消失而自动释放，必须显式处理：
- React：在
useEffect清理函数中调用controller.abort()或removeEventListener - Vue 3：在
onBeforeUnmount中执行（比onUnmounted更早，DOM 尚未移除，更安全） - Vue 2：用
beforeDestroy（destroyed已太晚，DOM 可能已不可访问） - 事件委托（如
document.addEventListener('click', handler)）务必配对清理，避免跨组件干扰
不复杂但容易忽略：关键不在“要不要清”，而在“怎么清才可靠”。绑定在哪，清理就在哪；谁创建引用，谁负责释放。
