Javascript中的事件冒泡

在Javascript中，事件冒泡是一种事件传播机制，它指的是当一个元素触发了事件之后，它的父元素也会接收到该事件，接着是父元素的父元素，一直沿着父元素一直到最顶层的元素。在此过程中，可以通过Javascript代码来分别捕捉每一个元素接收到的事件。

事件冒泡的执行顺序

事件冒泡是从最具体的节点出发，一直向上冒泡到最不具体的节点。例如下面的HTML代码：

<div id="parent">
  <div id="child"></div>
</div>

假设我们给child元素绑定了一个点击事件，那么当我们点击child元素时，事件会一直冒泡到parent元素，然后再次冒泡到最顶层的元素。所以事件冒泡的执行顺序为：

child -> parent -> document -> window

代码示例

下面给出一个代码示例，演示了如何通过Javascript代码来分别捕捉每一个元素接收到的事件。我们先定义一个HTML代码结构：

<div id="parent">
  <div id="child"></div>
</div>

然后我们给child元素绑定点击事件：

let child = document.querySelector("#child");
child.addEventListener("click", function(event) {
  console.log("Child clicked");
});

let parent = document.querySelector("#parent");
parent.addEventListener("click", function(event) {
  console.log("Parent clicked");
});

document.addEventListener("click", function(event) {
  console.log("Document clicked");
});

window.addEventListener("click", function(event) {
  console.log("Window clicked");
});

当我们点击child元素时，控制台会依次输出以下内容：

Child clicked
Parent clicked
Document clicked
Window clicked

可以看到，事件冒泡机制将点击事件从child元素一直冒泡到最顶层的元素，Javascript代码分别捕捉了每一个元素接收到的事件，并按照冒泡顺序依次输出了日志。