什么是JavaScript事件冒泡与事件委托【教程】_技术教程

事件冒泡是DOM默认行为，事件从目标元素逐层向上触发至根节点；事件委托利用冒泡机制，将监听器绑定在父元素上，通过event.target.closest()安全获取真正点击的子元素。

事件冒泡不是bug，是DOM默认行为

点击一个，它的父 、祖父

 甚至 document 都会收到这个 click 事件——这不是意外，是浏览器按规范走的流程。事件从目标元素出发，逐层向上“冒”到根节点，中间每层只要绑了同类型监听器就会触发。

冒泡阶段是默认开启的，无需额外设置；捕获阶段需显式传 tru
e 给 addEventListener() 第三个参数
不是所有事件都冒泡：比如 focus、blur、mouseenter、mouseleave 默认不冒泡
阻止冒泡用 event.stopPropagation()，别用已废弃的 event.cancelBubble = true

注意：调用 stopPropagation() 后，同一事件流中更上层的监听器（包括 document 上的）将完全收不到该事件

事件委托就是“让爸爸代签收快递”
你不用给每个 
 单独绑 click，而是把监听器挂在它们共同的父级  上，等点击发生后，靠 event.target 查出到底点的是哪个 
——这就是委托的本质。

必须依赖冒泡：如果事件不往上跑，父元素根本收不到子元素的点击

event.target 是**真正被点击的元素**，可能是个  或 ，不是你期望的 
；常用 event.target.closest('li') 安全获取目标项
动态添加的元素自动生效：后续用 appendChild() 或 innerHTML 加的 
，无需重新绑定
别在委托处理器里直接操作 event.target 的样式或属性，除非你确认它就是你要处理的节点类型


为什么不能只写 if (event.target.tagName === 'LI')

看似简单，但实际容易翻车。因为用户可能点的是

 里的文字、图标或按钮，此时 event.target 是那个子元素，tagName 就不是 'LI' 了。
document.getElementById('myList').addEventListener('click', function(event) {
  // ❌ 危险：点到 li 里的 span 就失效
  if (event.target.tagName === 'LI') {
    console.log('OK');
  }

  // ✅ 推荐：向上找最近的 li
  const item = event.target.closest('li');
  if (item) {
    console.log('Clicked item:', item.textContent);
  }
});


closest() 兼容性好（IE 不支持，但现代项目基本可忽略）；若需兼容老 IE，可用循环遍历 parentNode

避免用 event.currentTarget 判断目标——它永远是绑定监听器的那个父元素，不是你点的那个
委托时别忘了考虑事件类型：比如 input 事件不冒泡，得用 change 或监听 input 的父容器并用 focusin/focusout 替代

什么时候不该用事件委托
委托不是银弹。有些场景硬套反而增加复杂度或引入 bug。

元素数量极少（比如就 3 个按钮），直接绑定更清晰，没性能压力
需要精确控制事件顺序或依赖 event.preventDefault() 阻止默认行为，且子元素类型混杂（如表单内同时有  和 ），委托里判断逻辑易出错
父容器本身有滚动、拖拽等交互，事件委托可能干扰其原生行为（例如 touchmove 被误拦截）
使用 Web Components 或 Shadow DOM 时，冒泡默认被截断，委托需显式配置 composed: true



真实项目里，委托和直接绑定常共存：列表用委托，关键操作按钮仍单独绑定。关键不是“用不用”，而是“谁该负责收这个事件”。