JavaScript - 事件冒泡

事件冒泡

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

事件冒泡步骤

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

事件触发

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

捕获阶段（可选）

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

目标阶段

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

冒泡阶段

在目标阶段之后，事件开始从目标元素向 DOM 树的根部冒泡。
在此阶段，将执行未注册第三个参数或第三个参数设置为 false 的事件处理程序。

使用 2 个嵌套 DIV 的事件冒泡

在这个嵌套的 <div> 元素示例中，当子 <div> 上的 click 事件通过 DOM 层次结构向上传播以触发父 <div> 上的 click 事件侦听器时，事件冒泡是显而易见的。尽管在子事件上被单击，但子事件侦听器和父事件侦听器都会按顺序响应 click 事件。

此行为展示了 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> 元素上的连续单击事件侦听器。每个级别都使用独特的背景颜色设置样式，直观地表示其层次结构。

单击级别 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>

打印本页