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>

列印頁面