JavaScript - 事件冒泡

事件冒泡

事件冒泡是 JavaScript 中的一个概念，它指的是事件在 DOM（文档对象模型）层次结构中传播时处理事件的顺序。当某个元素上发生事件（例如单击或按键）时，它不仅可以在该特定元素上触发处理程序，还可以在其 DOM 树中的祖先元素上触发处理程序。

事件冒泡步骤

以下是事件冒泡的分步说明：

事件触发

在特定的 DOM 元素上触发事件，例如单击按钮或按下键。
这是事件传播的起点。

捕获阶段（可选）

事件可以选择性地经过捕获阶段。此阶段从 DOM 树的根开始，并向目标元素移动。
在此阶段，使用第三个参数 true 向 addEventListener 方法注册的事件处理程序将被执行。

目标阶段

事件到达目标元素，即事件最初发生的元素。

冒泡阶段

在目标阶段之后，事件开始从目标元素向上冒泡到 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>Nested Divs</h2>
	<div class="parent" id="parentDiv">
		<div class="child" id="childDiv">Click me!</div>
	</div>
	<div id="message"></div>
	<script>
		let messageElement = document.getElementById('message');

		document.getElementById('parentDiv').addEventListener('click', function () {
			messageElement.innerHTML+='Parent div clicked<br>';
		});

		document.getElementById('childDiv').addEventListener('click', function () {
			messageElement.innerHTML+='Child div clicked<br>';
		});
	</script>
</body>
</html>

灰色框是父 div，蓝色框是子 div。

使用 3 个嵌套级别的事件冒泡

在这个具有三层嵌套 <div> 元素的示例中，事件冒泡的演示是，点击最内层的 Level 3 <div> 元素会依次触发父 Level 2 和 Level 1 <div> 元素上的点击事件侦听器。使用不同的背景颜色进行样式设置，每个级别都直观地表示其层次结构。

点击 Level 3 <div> 元素后，事件向上传播，调用更高级别元素的事件侦听器。控制台日志显示消息，指示被点击的级别及其背景颜色，展示了 DOM 中处理嵌套结构的简化事件冒泡机制。

<!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 (Click me!)
			</div>
		</div>
	</div>
	<div id="message"></div>
	<script>
		const messageElement = document.getElementById("message");
		document.getElementById('div1').addEventListener("click", function (event) {
			messageElement.innerHTML += "Clicked on Level 1, Background Color:" + getComputedStyle(event.target).backgroundColor + "<br>";
		});

		document.getElementById('div2').addEventListener("click", function (event) {
			messageElement.innerHTML += "Clicked on Level 2, Background Color:" + getComputedStyle(event.target).backgroundColor + "<br>";
		});

		document.getElementById('div3').addEventListener('click', function (event) {
			messageElement.innerHTML +="Clicked on Level 3, Background Color:" + getComputedStyle(event.target).backgroundColor + "<br>";
		});
	</script>
</body>
</html>

打印页面