核心是切断闭包与外部大对象的强引用链：避免闭包捕获循环变量或组件实例，用 dataset/id 提取标识、解构关键字段、使用 once 选项、命名函数配对增删、事件委托替代多闭包、devtools 验证清理效果。
核心在于切断闭包与外部大对象之间的强引用链——事件监听器本身不泄漏，但闭包捕获了不该长期持有的变量，导致整个作用域无法回收。
明确监听器是否真需要闭包
很多场景下，闭包只是为传递参数或访问局部状态，其实可用更轻量方式替代：
- 用
event.currentTarget.dataset或event.target.id提取标识，避免在闭包中捕获循环变量或组件实例 - 把关键字段提前解构出来，例如
const { id, name } = item;，再传入回调函数，而不是直接闭包整个item对象 - 对一次性操作，直接使用
{ once: true }选项，省去手动清理步骤
确保监听器注册与移除严格配对
匿名函数无法被精准移除，是隐性增长的常见源头：
- 始终用命名函数或变量保存监听器引用，例如
const handler = () => {...}; element.addEventListener('click', handler); - 在组件卸载、元素销毁或页面跳转前，必须调用
element.removeEventListener('click', handler) - 在 Vue/React 中，优先使用
onUnmounted或useEffect的清理函数自动执行移除逻辑
改用事件委托集中管理
避免为每个子元素单独绑定闭包监听器，大幅减少闭包数量和作用域链深度：
- 将监听器绑定到父容器，通过事件冒泡 +
event.target判断来源 - 配合
data-*属性携带必要上下文，如<button data-id="123"></button>，回调中只读取字符串 ID 而非引用整个数据项 - 这样只需维护一个闭包，且其捕获范围可控（通常仅限事件对象和少量静态配置）
借助工具验证清理是否生效
肉眼难以确认引用是否真正断开，需依赖 DevTools 实证：
- 在疑似泄漏操作前后各拍一次 Heap Snapshot，切换 Comparison 模式，筛选
Closure类型 - 点击增长明显的闭包，查看右侧
Retainers面板——若仍显示EventListener或window，说明未成功移除 - 检查快照中是否存在
Detached DOM tree，常与未清理监听器强相关
