WeakMap 能避免内存泄漏，因其键为弱引用，DOM 元素卸载后可被垃圾回收；普通 Map 会强持有键导致泄漏。核心是用 WeakMap 存储元素→回调映射，父容器统一监听并动态查找执行。
事件委托本身不依赖弱引用，但用 WeakMap 存储子元素与回调的映射，能避免内存泄漏，尤其适合动态增删节点的场景。
为什么需要 WeakMap 而不是普通 Map？
WeakMap 的键必须是对象，且对键的引用是「弱引用」——当 DOM 元素被移除、不再被其他变量引用时，即使它仍作为 WeakMap 的键存在，也能被垃圾回收器清理。普通 Map 会强持有键，导致已卸载的 DOM 节点无法释放，引发内存泄漏。
如何用 WeakMap 建立「元素 → 回调」映射
核心思路：不把回调直接绑定到每个子元素上，而是由父容器统一监听事件；触发时从 WeakMap 中查找目标元素对应的处理函数。
- 创建一个
WeakMap实例，用于存储element → handler映射 - 提供注册方法：
on(target, selector, handler)，根据 CSS 选择器匹配子元素，并将 handler 存入 WeakMap（以匹配到的元素为键） - 在父级监听事件（如
click），利用event.target.closest(selector)找到最近匹配的子元素 - 查
WeakMap获取该元素绑定的 handler 并执行
一个轻量实现示例
以下是一个可复用的委托管理器：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
class DelegatedEvents {
constructor(container) {
this.container = container;
this.handlers = new WeakMap();
this.container.addEventListener('click', this.handleEvent.bind(this));
}
handleEvent(e) {
// 假设只处理 .btn 类型点击
const target = e.target.closest('.btn');
if (target && this.handlers.has(target)) {
this.handlers.get(target)(e);
}
}
on(selector, handler) {
// 注意：这里需确保 selector 匹配的是 container 内的子元素
const targets = this.container.querySelectorAll(selector);
targets.forEach(el => this.handlers.set(el, handler));
}
}
使用时：
const container = document.getElementById('list');
const delegate = new DelegatedEvents(container);
// 动态添加的按钮也能被正确处理（只要后续调用 on 注册）
container.innerHTML += '<button class="btn">New Item</button>';
delegate.on('.btn', (e) => console.log('clicked:', e.target.textContent));
注意事项和优化点
WeakMap 无法遍历，也不能通过元素外的标识反查 handler，因此注册逻辑要保证每次新增元素后调用 on 更新映射；也可结合 MutationObserver 自动监听新增节点并注册，但需权衡复杂度。
更健壮的做法是：不直接存 handler，而是存一个封装了 selector + handler 的配置项，并在事件触发时做精确匹配，避免误触发。
