事件冒泡机制详解

原创

于 2024-12-16 23:18:07 发布 · 795 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

一、事件传播的三个阶段

1. 捕获阶段

事件从最外层元素（如`document`）开始，沿着 DOM 树向目标元素传播。这个阶段就像是事件的“下行通道”，在这个过程中，事件会经过目标元素的祖先元素。不过，在捕获阶段，默认情况下，事件不会触发这些祖先元素上绑定的事件处理程序（除非使用`addEventListener`函数的第三个参数`true`来指定在捕获阶段执行处理程序）。

2. 目标阶段

当事件到达目标元素（即实际触发事件的元素，如用户点击的按钮）时，这个阶段就开始了。在目标阶段，目标元素上绑定的事件处理程序会被触发。

3. 冒泡阶段

事件从目标元素开始，沿着 DOM 树向上传播，回到最外层元素。这个阶段就像是事件的“上行通道”，在这个过程中，事件会依次触发经过的祖先元素上绑定的事件处理程序（如果有）。这是事件冒泡机制的核心阶段，也是在前端开发中经常利用的阶段。

二、代码示例

<div id="outer">

  <div id="middle">

    <div id="inner">Click Me</div>

  </div>

</div>

document.getElementById("outer").addEventListener("click", function () {

  console.log("Outer div clicked");

});

document.getElementById("middle").addEventListener("click", function () {

  console.log("Middle div clicked");

});

document.getElementById("inner").addEventListener("c