事件委托通过父容器集中监听并利用冒泡机制判断目标，显著提升性能：内存节省90%+、首渲快20%~50%，适用于动态列表、表格等场景，但focus/blur等非冒泡事件需特殊处理。

JavaScript 操作 DOM 本身开销不大，但频繁绑定大量事件监听器（比如给 100 个列表项 each 绑 click）会显著增加内存占用和初始化时间；事件委托通过“以少控多”的方式，把监听逻辑集中在父容器上，性能提升主要体现在内存节省、绑定速度加快、动态元素天然支持三方面——实际项目中，监听器数量减少 90%+ 很常见，首次渲染快 20%~50%，尤其在列表长、交互频繁的场景下效果明显。

为什么直接绑定多个事件监听器慢？

每调用一次 element.addEventListener()，浏览器就要创建一个监听器对象、维护事件队列、建立内部引用。假设有 500 个按钮：

• 直接绑定：生成 500 个独立监听器，占用更多内存，GC 压力增大
• DOM 更新（如增删节点）时，需反复 add/remove 监听器，易漏绑或重复绑定
• 初始渲染阶段执行 500 次 JS 调用，阻塞主线程更久

事件委托怎么写？关键就三步

利用事件冒泡机制，在父级监听，再用 event.target 判断真实触发源：

// ✅ 推荐：委托到 ul，只绑 1 个监听器
document.getElementById('list').addEventListener('click', function (e) {
  if (e.target.tagName === 'LI') {
    console.log('点击了列表项：', e.target.textContent);
  }
});

// ✅ 更精确：用 class 或 data 属性判断（避免误判子元素）
document.getElementById('list').addEventListener('click', function (e) {
  const btn = e.target.closest('button[data-action]');
  if (btn) {
    console.log('执行操作：', btn.dataset.action);
  }
});

哪些场景特别适合事件委托？

• 动态渲染的列表（如搜索结果、分页加载），新节点无需重新绑定
• 表格行、菜单项、标签页等结构重复且数量不定的区域
• 移动端需兼容 click/touch 的复合交互（统一在父层处理）
• 单页应用中频繁切换视图，避免反复清理旧监听器

要注意的边界情况

事件委托不是万能的，有些行为无法冒泡（如 focus、blur、mouseenter），也不能阻止默认行为后还依赖冒泡路径。需要时可：

• 对 focus/blur 用事件捕获（useCapture = true）或代理到 body
• 用 event.stopPropagation() 谨慎控制冒泡范围，避免影响外层逻辑
• 避免过度委托——比如整个 document 监听所有 click，会增加判断开销，建议委托到最近公共父级

不复杂但容易忽略：委托的核心不在“省代码”，而在让事件管理更可控、更贴近 DOM 生命周期。用对了，性能和可维护性都会上一个台阶。