事件冒泡是 JavaScript 中的一个概念，指的是事件在 DOM（文档对象模型）层次结构中传播时的处理顺序。当某个特定元素上发生事件，例如点击或按键，它可以不仅触发该特定元素上的处理程序，还可以触发其 DOM 树中祖先节点上的处理程序。
事件冒泡步骤
以下是事件冒泡的逐步解释：
事件触发
事件在一个具体的 DOM 元素上被触发，比如按钮被点击或键被按下。
这是事件传播的起点。
捕获阶段（可选）
事件可以选择经历捕获阶段。此阶段从 DOM 树的根部开始并向目标元素移动。
在此阶段，使用 addEventListener 方法并设置第三个参数为 true 注册的事件处理程序将被执行。
目标阶段
事件到达目标元素，即事件最初发生的那个元素。
冒泡阶段
在目标阶段之后，事件开始从目标元素向上冒泡至 DOM 树的根部。
在此阶段，没有设置第三个参数或将其设置为 false 的事件处理程序将被执行。
使用 2 个嵌套的 DIV 的事件冒泡
在这个嵌套 <div> 元素的例子中，事件冒泡很明显，因为点击子 <div> 的事件会沿着 DOM 层次结构向上传播，触发父 <div> 上的点击事件监听器。尽管点击的是子元素，但子元素和父元素的事件监听器都会依次响应点击事件。
这种行为展示了默认的事件冒泡机制，在 DOM 中，事件从目标元素向上到其祖先元素传播，允许多个元素对同一个事件作出响应。在控制台上，点击子 <div> 后，会显示子元素和父元素事件监听器的日志消息，说明了事件冒泡的过程。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.parent {
width: 600px;
height: 200px;
background-color: #eee;
position: relative;
cursor: pointer;
}
.child {
width: 400px;
height: 100px;
background-color: #66c2ff;
position: absolute;
top: 50px;
left: 50px;
}
#message {
margin-top: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<h2>嵌套 Divs</h2>
<div class="parent" id="parentDiv">
<div class="child" id="childDiv">点击我！</div>
</div>
<div id="message"></div>
<script>
let messageElement = document.getElementById('message');
document.getElementById('parentDiv').addEventListener('click', function () {
messageElement.innerHTML+='父 div 被点击<br>';
});
document.getElementById('childDiv').addEventListener('click', function () {
messageElement.innerHTML+='子 div 被点击<br>';
});
</script>
</body>
</html>
灰色框是父 <div>，蓝色框是子 <div>。
使用 3 个嵌套层级的事件冒泡
在这个有三个嵌套层级的 <div> 元素的例子中，当点击最内层的 Level 3 <div> 时，依次触发父级 Level 2 和 Level 1 <div> 元素上的点击事件监听器。每个层级用不同的背景颜色进行了样式化，以视觉方式表示其层级关系。
点击 Level 3 <div> 后，事件向上传播，调用更高级别的元素的事件监听器。控制台日志显示出消息，指示被点击的层级及其背景颜色，展示了处理嵌套结构时流畅的事件冒泡机制。
<!DOCTYPE html>
<html>
<head>
<style>
.level1 {
background-color: #ff9999;
padding: 20px;
text-align: center;
max-width: 80%;
cursor: pointer;
}
.level2 {
background-color: #99ff99;
padding: 15px;
}
.level3 {
background-color: #9999ff;
padding: 10px;
cursor: pointer;
}
#message {
margin-top: 10px;
font-weight: lighter;
border: 1px solid #ddd;
padding: 10px;
max-width: 80%;
background-color: #f9f9f9;
border-radius: 5px;
font-family: 'Arial', sans-serif;
font-size: 14px;
color: #333;
}
</style>
</head>
<body>
<div class="level1" id="div1">
Level 1
<div class="level2" id="div2">
Level 2
<div class="level3" id="div3">
Level 3 (点击我！)
</div>
</div>
</div>
<div id="message"></div>
<script>
const messageElement = document.getElementById("message");
document.getElementById('div1').addEventListener("click", function (event) {
messageElement.innerHTML += "点击了 Level 1，背景颜色:" + getComputedStyle(event.target).backgroundColor + "<br>";
});
document.getElementById('div2').addEventListener("click", function (event) {
messageElement.innerHTML += "点击了 Level 2，背景颜色:" + getComputedStyle(event.target).backgroundColor + "<br>";
});
document.getElementById('div3').addEventListener('click', function (event) {
messageElement.innerHTML += "点击了 Level 3，背景颜色:" + getComputedStyle(event.target).backgroundColor + "<br>";
});
</script>
</body>
</html>