事件委托通过父级单监听降低引用堆积风险，但需用closest精准匹配目标、保存函数引用以便解绑，并避免闭包持有大对象或组件实例。
事件委托本身不是防泄漏的“银弹”，但它能从根源上减少因事件监听器管理不当引发的内存泄漏。关键在于用对方式、守住边界、及时收尾。
一次绑定，永久省心
传统做法为每个子元素单独绑定监听器，100 个按钮就创建 100 个函数实例和 100 条引用链——哪怕 DOM 被删，若没调用 removeEventListener，这些监听器仍驻留在内存中，拖住整个作用域。
事件委托只在父容器上绑定一个监听器，监听器数量从 O(n) 降到 O(1)，大幅降低引用堆积风险。新增或删除子节点完全不影响监听逻辑，无需补绑也不怕漏解绑。
精准识别，避免误捕获
监听父级后，e.target 可能是子元素里的 span、img 或图标，而非你期望的按钮或列表项。若直接用 e.target.classList.contains('btn') 判断，容易因目标不匹配而跳过处理，或更糟：在错误节点上执行逻辑，意外保留闭包引用。
推荐统一使用 e.target.closest('button[data-action]') —— 它向上查找最近匹配的选择器，语义清晰、兼容嵌套结构，且不会因子元素干扰导致判断失效。
清理时机不能省略
虽然委托简化了动态节点的管理，但父容器一旦被销毁（如 Vue 组件卸载、单页路由跳转），那个唯一的监听器若没被移除，就会成为悬空引用，拖住整个回调函数及其闭包中的所有变量。
务必保存监听函数引用：
- 不要写
el.addEventListener('click', () => { ... })（匿名函数无法解绑） - 应写：
const handler = e => { ... }; el.addEventListener('click', handler); - 在父容器销毁时调用：
el.removeEventListener('click', handler)
避开闭包陷阱
监听器回调若在内部引用了大型对象（如组件实例、API 响应数据、Canvas 上下文），这个闭包就会阻止垃圾回收。尤其在 SPA 中，handler 若隐式持有已卸载组件的 this，泄漏就不可避免。
建议：
- 把业务逻辑抽离到独立函数，避免在监听器内直接访问外部大对象
- 用 data- 属性传递必要参数（如
data-id="123"），而非闭包捕获整个状态 - 对需强关联的数据，改用 WeakMap 存储，确保 DOM 节点被删后引用自动释放
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
