如何利用 WeakMap 实现对 DOM 事件监听函数的“自动注销”关联以防止泄露-js教程-PHP中文网

WeakMap能避免内存泄漏是因为其键为弱引用对象，DOM元素被移除且无其他引用时自动回收对应条目；而Map强引用键，会阻止GC回收，导致内存泄漏。

如何利用 weakmap 实现对 dom 事件监听函数的“自动注销”关联以防止泄露

WeakMap 可以帮你把事件监听器和 DOM 元素“弱绑定”，让监听器随元素被回收而自动失效，避免因忘记 removeEventListener 导致的内存泄漏。

为什么普通 Map 不行？

普通 Map 会强持有 key（比如 DOM 元素），即使该元素已从 DOM 中移除、也无其他引用，它仍不会被垃圾回收——因为 Map 还“抓着它”。WeakMap 的 key 必须是对象，且是弱引用：一旦 DOM 元素失去所有其他引用，WeakMap 不会阻止其回收，对应 entry 自动消失。

核心思路：用 WeakMap 存储监听器映射

不直接在全局或闭包中长期持有监听函数，而是按需生成、按需查找，并确保监听器生命周期与目标元素一致：

用 WeakMap 的 key 存 DOM 元素，value 存一个 Map（或数组），记录该元素上挂的监听器
每次添加监听器前，先查 WeakMap 是否已有该元素的监听器集合；没有就新建并存入
监听器内部可通过闭包捕获必要数据，但不捕获外部大对象或整个组件实例
元素被移除后，WeakMap 中的条目自动消失；下次再查就拿不到旧监听器，自然不会重复绑定或误调用

一个实用封装示例

下面是一个轻量工具，支持自动管理监听器：

const listenerRegistry = new WeakMap();

function on(el, type, handler, options) {
  if (!listenerRegistry.has(el)) {
    listenerRegistry.set(el, new Map());
  }
  const elListeners = listenerRegistry.get(el);
  
  // 用 type + options 做唯一键，避免重复绑定同一 handler
  const key = `${type}|${JSON.stringify(options || {})}`;
  if (!elListeners.has(key)) {
    const wrapped = function(...args) {
      // 可加日志、防抖等逻辑，但注意别意外延长引用
      handler.call(this, ...args);
    };
    el.addEventListener(type, wrapped, options);
    elListeners.set(key, { handler, wrapped, options });
  }
}

function off(el, type, handler, options) {
  const elListeners = listenerRegistry.get(el);
  if (!elListeners) return;
  const key = `${type}|${JSON.stringify(options || {})}`;
  const record = elListeners.get(key);
  if (record) {
    el.removeEventListener(type, record.wrapped, options);
    elListeners.delete(key);
  }
}

// 使用时：
const btn = document.querySelector('#my-btn');
on(btn, 'click', () => console.log('clicked'), { once: true });

// btn 被 innerHTML 清空或 remove() 后，WeakMap 条目自动消失，无需手动 off