🧑🎓 个人主页：《爱蹦跶的大A阿》
🔥当前正在更新专栏：《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》
✨ 前言
事件传播是JavaScript中非常重要的一个概念,它描述了从嵌套元素到祖先元素的事件传播顺序。本文将详细介绍事件传播的两种主要模式:冒泡传播和捕获传播。
理解事件传播对编写事件处理函数非常重要,它可以帮助我们控制事件触发的顺序,实现事件代理等技巧。通过本文,你将深入了解事件在DOM中的传播规则,并能够根据实际需求选择合适的事件传播方式。
✨ 正文
事件传播描述从嵌套元素到父级元素的顺序,主要有两种模式:冒泡传播和捕获传播。
冒泡传播
冒泡传播 meanspropagation from the target element straight up to DOM root.
例如点击嵌套的标签时:
<div><em>Click me!</em>
</div>- 点击
<em>会首先触发<em>上的处理程序。 - 然后事件会冒泡到
<div>。 - 再冒泡到
<body>等直到 document 对象。
// 添加事件处理程序
em.onclick = e => alert("Em");
div.onclick = e => alert("Div");// 点击 <em> 会依次触发:
// Em (target phase)
// Div (bubbling phase)
捕获传播
Capturing propagation is the opposite: from the root down to the target element.
设置 addEventListener 的第三个参数为 true 可以打开捕获模式:
// 添加捕获监听
document.addEventListener("click", e => alert("document"), true);
div.addEventListener("click", e => alert("div"), true);// 点击 <em> 会依次触发:
// document (capturing phase)
// div (capturing phase)
// em (target phase)
事件流
完整的事件传播过程包含三个阶段:
- Capturing phase – 事件从document根节点向下传播到目标元素。
- Target phase – 事件到达目标元素,触发目标元素上的处理程序。
- Bubbling phase – 事件从目标元素向上冒泡回文档根节点。
我们可以在不同阶段通过传统的on<event>或addEventListener绑定处理程序。
应用场景
- 根据冒泡或捕获机制,实现事件代理。
- 使用捕获或冒泡根据需求控制事件处理顺序。
以上整理了事件冒泡和捕获的概念以及应用场景,希望对大家理解事件传播有帮助。
✨ 结语
事件冒泡和捕获描述了DOM事件触发时的传播方向。掌握它们可以更好地控制事件处理逻辑。
本文通过多个代码示例介绍了冒泡和捕获的概念、区别以及应用场景。希望这篇文章可以增进你对事件传播的理解,也可以作为后续面试的准备材料。如果有任何疑问,欢迎在评论区与我讨论。
