事件委托需精准解绑而非集中销毁：各模块挂载时用唯一标识（如symbol）标记委托监听，卸载时按命名空间清理；优先绑定到视图容器而非document，避免内存泄漏与误伤。
事件委托本身不自动销毁，路由切换或页面卸载时若未主动清理，容易导致内存泄漏、重复绑定、旧回调执行等隐患。关键不是“在根节点集中销益”，而是精准解绑 + 生命周期对齐——即在组件/视图卸载前，清除它当初通过事件委托注册的监听逻辑。
明确委托监听的归属关系
不能把所有事件都堆在 document 或 #app 上然后统一清空（会误伤其他模块）。正确做法是：每个功能模块（如某个 React 组件、Vue 组件、或纯 JS 视图类）在挂载时，用唯一标识标记自己绑定的委托逻辑；卸载时只清理自己的。
- 给委托监听器加命名空间（推荐用 Symbol 或带前缀的字符串）：
document.addEventListener('click', handler, { capture: true });→ 改为const ns = Symbol('user-list-click');<br>document.addEventListener('click', handler, { capture: true, once: false });<br>// 卸载时：<br>document.removeEventListener('click', handler, { capture: true }); - 更稳妥：封装委托管理器，内部用 Map 存储「事件类型 + 委托选择器 + 回调 + 命名空间」元组，卸载时按命名空间批量移除
在路由/视图生命周期中触发清理
SPA 框架（React/Vue/Svelte）或自研路由系统，必须确保清理动作发生在视图真正不可见、资源应释放的时机：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
-
React：在
useEffect返回的清理函数中移除委托监听器（注意：不能依赖useCallback缓存 handler 后直接 remove —— 因为闭包可能已更新，需用同一引用） -
Vue 2/3：在
beforeUnmount（或beforeDestroy）钩子中调用解绑方法 -
纯 JS 路由：监听路由变化（如
popstate、hashchange），在新视图load前，调用上一个视图的destroy()或teardown()方法
避免用 document/body 作为万能委托根节点
虽然方便，但易失控。优先降级到当前视图容器节点（如 ref.current、this.$el、document.getElementById('user-page')）：
- 好处：卸载时只需
container.removeEventListener(...)，不影响其他区域 - 即使容器被
innerHTML = ''或remove()，其上绑定的事件监听器也会随 DOM 节点被 GC（前提是没被闭包强引用） - 若必须用
document，务必配合命名空间 + 显式removeEventListener，不要依赖节点移除自动清理
补充：监听器内避免隐式强引用
委托回调中若引用了大型对象（如整个组件实例、大数组、未释放的定时器），即使解绑了事件，仍会造成内存泄漏：
- 回调中尽量只做轻量分发，业务逻辑抽离到独立函数，避免闭包捕获不必要的上下文
- 使用弱引用结构（如
WeakMap）缓存节点与状态的映射，确保节点被移除后状态可回收 - 检查是否意外保留了
setTimeout、setInterval、IntersectionObserver等，它们需一并清理
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
