事件委托通过在父元素绑定监听器利用事件冒泡处理子元素事件，减少内存占用、提升性能并天然支持动态内容；核心是用event.target识别目标元素，需选择稳定祖先节点且注意冒泡限制。

事件委托通过把事件监听器绑定在父元素上，利用事件冒泡机制来统一处理子元素的事件，避免为每个子元素单独绑定监听器，从而显著减少内存占用和DOM操作，提升页面性能。

事件委托的核心原理：事件冒泡

当用户点击某个子元素时，事件会从该元素开始，逐级向上传播到父元素，直到 document。利用这个特性，我们只需在父容器上监听一次事件，再通过 event.target 判断实际触发事件的元素，就能精准响应不同子项的操作。

• 所有支持冒泡的事件（如 click、mouseover、keydown）都可委托；focus 和 blur 默认不冒泡，需用 focusin/focusout 替代
• 委托目标必须是稳定存在的祖先节点——通常选不会频繁增删的容器，比如 <ul></ul>、<div class="list"> <li>动态添加的子元素无需重新绑定事件，天然支持，因为监听始终在父层</li> <h3>基础实现方式：用 event.target 匹配目标</h3> <p>以列表项点击为例，不给每个 <code><li> 绑事件，而是绑定在 <ul></ul> 上：
  

  Miller CSV TSV JSON 数据处理器

  Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。

  下载

  document.querySelector('ul').addEventListener('click', function(e) {
    if (e.target.tagName === 'LI') {
      console.log('点击了列表项：', e.target.textContent);
    }
  });

  • 用 e.target 获取真正被点击的元素，不是 this（this 指向 ul）
  • 可用 e.target.matches('.btn-delete') 判断是否匹配特定选择器，比 tagName 更灵活
  • 必要时用 e.stopPropagation() 阻止冒泡，但委托场景中一般不需要

  性能提升的关键点

  直接为 100 个按钮分别绑定 click 事件，会创建 100 个独立监听函数，占用更多内存，且每次 DOM 批量更新（如重绘列表）都要反复解绑/重绑；而委托只用 1 个监听器：

  • 内存开销大幅降低：监听器数量从 N 降到 1
  • 初始化更快：无需遍历大量节点执行 addEventListener
  • 动态内容友好：新增 <li> 后无需任何额外 JS 操作，事件自动生效
  • 维护更简单：逻辑集中，修改行为只需调整一处代码

  注意事项与常见陷阱

  事件委托不是万能的，使用时要注意边界情况：

  • 如果父容器本身需要响应事件，而子元素又调用了 e.stopPropagation()，会导致委托失效
  • 委托层级不宜过深（比如绑在 document 上处理所有按钮），会增加判断成本，也容易误匹配
  • 表单元素如 的 change、input 事件冒泡正常，但部分浏览器对某些事件支持有差异，建议实测
  • 用 e.currentTarget 可获取当前绑定监听器的元素（即父容器），和 e.target 不要混淆