JavaScript基础-DOM事件流

一、前言

在前端开发中，事件驱动 是实现用户交互的核心机制。当我们点击按钮、输入文本或滚动页面时，浏览器会触发相应的事件。而这些事件是如何在 DOM 树中传播的？为什么有时候点击子元素也会触发父元素的事件？

这就涉及到了 JavaScript 中一个非常重要的概念：DOM 事件流（Event Flow）。

本文将带你深入了解：

• 什么是 DOM 事件流；
• 事件传播的三个阶段：捕获、目标、冒泡；
• 如何监听不同阶段的事件；
• 阻止事件传播的方法；
• 实际开发中的常见使用场景；

通过这篇文章，你将掌握 JavaScript 中事件传播的底层机制，并能灵活运用到项目开发中。

二、什么是 DOM 事件流？

在 DOM 中，当一个事件发生时（如 click），它并不是只作用于触发它的那个元素，而是会在整个 DOM 树上进行传播。这种传播过程就被称为 事件流（Event Flow）。

🧠 事件传播的三个阶段：

1. 捕获阶段（Capture Phase）：事件从最外层的 window 对象开始，逐步向下传递到目标元素；
2. 目标阶段（Target Phase）：事件到达触发事件的目标元素；
3. 冒泡阶段（Bubble Phase）：事件从目标元素开始，逐级向上冒泡回传到最外层对象。

📌 简单记忆：
“由外向内 → 到达目标 → 由内向外”

三、事件传播流程图解

window
   ↓       ←← 捕获阶段
document
   ↓
html
   ↓
body
   ↓
targetElement   ←← 目标阶段
   ↓
body            ↑
   ↑             ↖
html              ↖
   ↑               冒泡阶段
document
   ↑
window

四、如何监听不同阶段的事件？

在 JavaScript 中，我们可以通过 addEventListener() 方法来监听事件，并通过第三个参数控制监听发生在哪个阶段。

element.addEventListener('click', handler, useCapture)

默认值为 false，即在 冒泡阶段 监听事件。

✅ 示例：演示事件传播的三个阶段

<div id="outer">
  外层 div
  <div id="inner">内层 div</div>
</div>

<script>
const outer = document.getElementById('outer')
const inner = document.getElementById('inner')

// 捕获阶段监听
outer.addEventListener('click', () => {
  console.log('外层 div - 捕获阶段')
}, true)

// 冒泡阶段监听
outer.addEventListener('click', () => {
  console.log('外层 div - 冒泡阶段')
}, false)

// 目标阶段监听
inner.addEventListener('click', () => {
  console.log('内层 div - 目标阶段')
})
</script>

📌 输出结果顺序：

外层 div - 捕获阶段
内层 div - 目标阶段
外层 div - 冒泡阶段

五、阻止事件传播

有时我们不希望事件继续传播下去，比如点击某个元素后不想触发父元素的事件，这时我们可以使用以下方法阻止事件传播。

✅ 使用 event.stopPropagation()

inner.addEventListener('click', function (e) {
  console.log('内层 div 被点击')
  e.stopPropagation()
})

📌 效果：

• 如果在捕获阶段调用，后续的捕获和目标阶段不会执行；
• 如果在冒泡阶段调用，后续的冒泡阶段不会执行；
• 不会阻止该元素上的其他监听器执行。

✅ 使用 event.stopImmediatePropagation()

如果你希望彻底阻止该事件的所有后续监听器执行（包括当前元素的其它监听器），可以使用：

inner.addEventListener('click', function (e) {
  console.log('第一个监听器')
  e.stopImmediatePropagation()
})

inner.addEventListener('click', function () {
  console.log('第二个监听器') // 不会执行
})

六、阻止默认行为

有些事件会有默认行为，比如 <a> 标签点击跳转、表单提交刷新页面等。我们可以通过 preventDefault() 来阻止这些默认行为。

const link = document.querySelector('a')

link.addEventListener('click', function (e) {
  e.preventDefault()
  alert('链接被点击，但没有跳转')
})

📌 注意：

• e.preventDefault() 不会影响事件传播；
• 如果你想同时阻止传播和默认行为，需要两个方法一起使用。

七、事件委托（Event Delegation）

事件委托是基于事件冒泡机制的一种优化手段，适用于动态添加或大量子元素的情况。

✅ 示例：给列表项统一绑定点击事件

<ul id="list">
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ul>

<script>
document.getElementById('list').addEventListener('click', function (e) {
  if (e.target.tagName === 'LI') {
    console.log('你点击了:', e.target.textContent)
  }
})
</script>

📌 优点：

• 减少监听器数量；
• 动态新增元素也能响应事件；
• 提升性能，尤其适用于大型列表或表格。

八、事件传播的实际应用场景

九、总结对比表

十、结语

感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！