如何建造自己的网站今日新闻最新头条10条摘抄
一、前言
在前端开发中，事件驱动 是实现用户交互的核心机制。当我们点击按钮、输入文本或滚动页面时，浏览器会触发相应的事件。而这些事件是如何在 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() 方法来监听事件，并通过第三个参数控制监听发生在哪个阶段。
element.addEventListener('click', handler, useCapture)| 参数 | 含义 |
|---|---|
element | 要绑定事件的 DOM 元素 |
'click' | 事件类型 |
handler | 事件处理函数 |
useCapture | 是否在捕获阶段监听（true/false） |
默认值为 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>📌 优点：
- 减少监听器数量；
- 动态新增元素也能响应事件；
- 提升性能，尤其适用于大型列表或表格。
八、事件传播的实际应用场景
| 场景 | 描述 |
|---|---|
| 表单验证 | 在冒泡阶段统一处理错误提示 |
| 弹窗组件 | 点击遮罩关闭弹窗（使用冒泡） |
| 导航栏高亮 | 点击子菜单更新父导航状态 |
| 表格排序 | 点击列头触发排序逻辑 |
| 阻止重复点击 | 使用 stopPropagation 或 once: true |
| 防止误操作 | 使用 preventDefault 阻止默认行为 |
九、总结对比表
| 特性 | 描述 |
|---|---|
| 事件传播阶段 | 捕获阶段 → 目标阶段 → 冒泡阶段 |
| 默认监听阶段 | 冒泡阶段（useCapture = false） |
| 添加监听器 | addEventListener(type, handler, useCapture) |
| 阻止传播 | event.stopPropagation() |
| 阻止默认行为 | event.preventDefault() |
| 阻止所有监听器 | event.stopImmediatePropagation() |
| 推荐程度 | ✅ 所有开发者必须掌握 |
十、结语
感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！