weakmap 是解决自定义事件监听器内存泄漏最自然的工具，因其以 dom 元素为键的弱引用特性，使监听器注册表随元素销毁自动清理，避免强引用导致的 gc 阻塞与资源驻留。
WeakMap 是解决自定义事件监听器内存泄漏最自然的工具之一，关键在于它让监听器与 DOM 元素“共生共灭”——元素被移除，监听器关联自动失效，无需手动清理。
为什么自定义监听器容易泄漏
开发者常把监听函数存在全局对象、组件实例属性或普通 Map 中，例如：
- 用 Object 或 Map 以 DOM 元素为 key 存储监听器：强引用阻止元素被 GC 回收
- 监听器内部闭包捕获了整个组件实例、大型数据或未释放的定时器：即使元素已卸载，这些资源仍驻留内存
- 动态添加多次监听却未去重，又没统一管理入口：重复绑定 + 无法批量清理 = 隐形泄漏温床
WeakMap 关联的核心做法
不存监听器本身，而是为每个目标元素维护一个“监听器注册表”，WeakMap 只负责桥接，真正的监听逻辑轻量、可复用：
- 声明 const listenerRegistry = new WeakMap()，全局或模块级单例即可
- 每次要给
el添加自定义事件监听时，先 listenerRegistry.get(el)；若无，则 new Set() 并 set(el, new Set()) - 将监听函数加入该 Set，并用
el.addEventListener(type, handler)绑定真实监听 - 移除时从 Set 删除 handler，若 Set 为空可忽略 —— WeakMap 会随 el 消失自动清理整条记录
配合弱引用监听器写法更稳妥
监听器函数本身也应避免强持外部大对象。推荐写法：
- 监听器用箭头函数或普通函数，但只捕获必要参数（如 event、id），不闭包整个 this 或 props
- 若需访问组件状态，改用回调注入或通过 dataset 传轻量标识，再由中心逻辑查表获取
- 对异步操作（如 fetch 后更新 UI），在执行前加一层 if (el.isConnected) 判断，避免对已销毁节点操作
实际小例子：带计数的按钮点击监听
不污染 DOM 属性，也不依赖组件生命周期手动清理：
- const clickCounts = new WeakMap()
- 绑定时：
const counts = clickCounts.get(btn) ?? new Map(); counts.set('click', (counts.get('click') || 0) + 1); clickCounts.set(btn, counts); - 监听函数内只做
counts.set('click', ...)，不持有 btn 外的任何引用 - btn 被
remove()后，WeakMap 条目自动消失，count 数据随之释放
