JavaScript事件冒泡和捕获

‍ 个人主页：《爱蹦跶的大A阿》

当前正在更新专栏：《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》

​ 

​

✨ 前言

        事件传播是JavaScript中非常重要的一个概念,它描述了从嵌套元素到祖先元素的事件传播顺序。本文将详细介绍事件传播的两种主要模式:冒泡传播和捕获传播。

        理解事件传播对编写事件处理函数非常重要,它可以帮助我们控制事件触发的顺序,实现事件代理等技巧。通过本文,你将深入了解事件在DOM中的传播规则,并能够根据实际需求选择合适的事件传播方式。

​

✨ 正文

事件传播描述从嵌套元素到父级元素的顺序,主要有两种模式:冒泡传播和捕获传播。

冒泡传播

冒泡传播 meanspropagation from the target element straight up to DOM root.

例如点击嵌套的标签时:

  Click me!

1. 点击  会首先触发  上的处理程序。
2. 然后事件会冒泡到 
   。
3. 再冒泡到  等直到 document 对象。

// 添加事件处理程序
em.onclick = e => alert("Em");
div.onclick = e => alert("Div");

// 点击  会依次触发:
// 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);

// 点击  会依次触发:  
// document (capturing phase)
// div (capturing phase)
// em (target phase)

 

事件流

完整的事件传播过程包含三个阶段:

1. Capturing phase – 事件从document根节点向下传播到目标元素。
2. Target phase – 事件到达目标元素,触发目标元素上的处理程序。
3. Bubbling phase – 事件从目标元素向上冒泡回文档根节点。

我们可以在不同阶段通过传统的on或addEventListener绑定处理程序。

应用场景

• 根据冒泡或捕获机制,实现事件代理。
• 使用捕获或冒泡根据需求控制事件处理顺序。

以上整理了事件冒泡和捕获的概念以及应用场景,希望对大家理解事件传播有帮助。

✨ 结语

        事件冒泡和捕获描述了DOM事件触发时的传播方向。掌握它们可以更好地控制事件处理逻辑。

        本文通过多个代码示例介绍了冒泡和捕获的概念、区别以及应用场景。希望这篇文章可以增进你对事件传播的理解,也可以作为后续面试的准备材料。如果有任何疑问,欢迎在评论区与我讨论。

    

​