JavaScript基础-DOM事件流

一、前言

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

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

本文将带你深入了解：

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

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

二、什么是 DOM 事件流？

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

🧠 事件传播的三个阶段：

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

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

三、事件传播流程图解

复制代码

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

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

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

html 复制代码

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

参数	含义
`element`	要绑定事件的 DOM 元素
`'click'`	事件类型
`handler`	事件处理函数
`useCapture`	是否在捕获阶段监听（true/false）

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

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

html 复制代码

<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()`

javascript 复制代码

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

📌 效果：

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

✅ 使用 `event.stopImmediatePropagation()`

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

javascript 复制代码

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

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

六、阻止默认行为

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

javascript 复制代码

const link = document.querySelector('a')

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

📌 注意：

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

七、事件委托（Event Delegation）

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

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

html 复制代码

<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>

📌 优点：

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

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

场景	描述
表单验证	在冒泡阶段统一处理错误提示
弹窗组件	点击遮罩关闭弹窗（使用冒泡）
导航栏高亮	点击子菜单更新父导航状态
表格排序	点击列头触发排序逻辑
阻止重复点击	使用 `stopPropagation` 或 `once: true`
防止误操作	使用 `preventDefault` 阻止默认行为

九、总结对比表

特性	描述
事件传播阶段	捕获阶段 → 目标阶段 → 冒泡阶段
默认监听阶段	冒泡阶段（`useCapture = false`）
添加监听器	`addEventListener(type, handler, useCapture)`
阻止传播	`event.stopPropagation()`
阻止默认行为	`event.preventDefault()`
阻止所有监听器	`event.stopImmediatePropagation()`
推荐程度	✅ 所有开发者必须掌握

十、结语

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

JavaScript基础-DOM事件流

一、前言

二、什么是 DOM 事件流？

🧠 事件传播的三个阶段：

三、事件传播流程图解

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

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

五、阻止事件传播

✅ 使用 event.stopPropagation()

✅ 使用 event.stopImmediatePropagation()

六、阻止默认行为

七、事件委托（Event Delegation）

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

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

九、总结对比表

十、结语

✅ 使用 `event.stopPropagation()`

✅ 使用 `event.stopImmediatePropagation()`