事件委托本身不导致内存泄漏，问题在于绑定后未正确清理生命周期。常见错误包括：1. 绑定到document/window未解绑；2. 错用非冒泡事件如focus；3. 回调闭包组件上下文。chrome memory面板中表现为detached节点持续增长、closure阶梯式上升，retaining path显示被全局eventlistener持有。
事件委托本身不是泄漏源，问题出在“委托绑定后没管好生命周期”——比如把监听器挂到 document 或 window 上，却在页面切换或组件卸载时完全忘记清理，而回调里又闭包了大量数据或 DOM 引用。
重点看委托是否长期驻留 + 是否捕获了不该留的对象
Chrome Memory 面板中，这类泄漏常表现为：
- Detached HTMLDivElement 或类似节点持续增长（说明 DOM 已移除，但委托回调还在强引用它）
-
Closure 数量阶梯式上升，点开 Retaining Path 可见它被某个
EventListener持有，而该监听器的 target 是document或window -
全局作用域下出现大量未释放的函数实例，尤其命名含
handleScroll、onDocumentClick等
聚焦三类典型委托失误
1. 绑在 document/window 上，但没配对解绑
常见于滚动监听、全局快捷键、模态框外点击关闭等场景：
- 反例：
document.addEventListener('click', handler)写了，但组件卸载时没调document.removeEventListener('click', handler) - 修复：React 中确保
useEffect返回清理函数；Vue 中在beforeUnmount解绑；纯 JS 封装成带dispose()的模块
2. 委托目标选错，导致监听器失效后仍乱绑
例如用 focus/blur 做委托（它们不冒泡），结果反复绑定新监听器，旧的却没删：
- 反例：
document.addEventListener('focus', e => {...})—— focus 不冒泡，实际只监听 document 自身，业务逻辑误以为能捕获子元素 focus，于是每次打开弹窗都新绑一个 - 修复：改用
focusin/focusout（冒泡版），或直接绑定到具体容器，避免泛滥
3. 委托回调里闭包了整个组件上下文
比如在 React Class 组件中，委托回调用了 this.state 或 this.refs，而监听器挂在全局，组件卸载后 this 仍被锁住：
- 反例：
document.addEventListener('click', () => console.log(this.data))，this是已销毁组件实例 - 修复：用
AbortController.signal控制监听器生命周期，或改用具名函数 + 显式解绑；避免在委托回调中直接访问长生命周期对象
快速验证与收尾动作
排查时可这样操作：
- 在 Memory 面板拍快照前，先手动点「Collect garbage」再拍，避免干扰
- 执行一次委托触发操作（如点击某区域），再关闭/离开对应模块，拍第二张快照，用 Comparison 查
EventListener和Closure的 Delta - 右键可疑
Closure→ 「Reveal in Summary view」→ 看右侧 Retainers，如果顶层是window或document，基本就是委托没清理 - 临时加日志：
console.log('delegate added')和console.log('delegate removed')，确认解绑逻辑是否真执行
不复杂但容易忽略
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
