JavaScript - 事件捕獲

事件捕獲

在 JavaScript 中，事件捕獲是事件傳播模型的初始階段，事件從文件樹的根節點向下傳播到目標元素。在此階段，瀏覽器會在事件到達目標元素之前，先捕獲目標元素祖先節點上的事件。

事件捕獲和事件冒泡是 JavaScript 事件傳播模型中的兩個階段。在事件捕獲中，瀏覽器從文件層次結構的根節點開始捕獲並觸發事件，並向下移動到目標元素。另一方面，事件冒泡發生在事件到達目標元素之後，然後從目標元素向上冒泡到根節點。

捕獲對於在更高級別的祖先節點上處理事件很有用，而冒泡是事件從目標元素向上傳播到層次結構的預設行為。理解這兩個階段對於有效地處理事件和操作事件流至關重要。

讓我們看看事件捕獲的一些重要方面。

方面	描述
階段	事件捕獲是事件傳播模型的初始階段。
方向	捕獲按照元素層次結構的反向順序發生，從文件樹的根節點向下傳播到目標元素。
用例	當您希望在事件到達目標元素或觸發任何冒泡階段處理程式之前，在更高級別的祖先節點上攔截和處理事件時很有用。
註冊	使用 addEventListener 的第三個引數註冊事件捕獲階段的事件監聽器（例如，element.addEventListener('click', myFunction, true);）。
傳播	在目標階段和冒泡階段之前自動傳播。事件沿著層次結構向下流動，在每個祖先節點上觸發捕獲階段的處理程式。
阻止預設行為	在捕獲階段使用 event.preventDefault() 可以阻止事件的預設行為，使其在到達目標元素之前就被阻止。
停止傳播	在捕獲階段使用 event.stopPropagation() 可以停止事件的進一步傳播，防止它到達目標元素或觸發冒泡階段的處理程式。

示例：基本事件捕獲

在此示例中，我們有一個容器 div (container) 以及其內部的一個按鈕 (myButton)。使用 addEventListener 並將第三個引數設定為 true 來新增兩個捕獲階段的事件監聽器，以啟用捕獲。當您單擊按鈕時，兩個捕獲階段的日誌訊息（Container clicked 和 Button clicked）將被顯示。這說明了事件從文件根節點向下傳播到目標元素的捕獲階段。

<!DOCTYPE html>
<html>
<body> 
	<div id="container">
		<button id="myButton">Click me!</button>
	</div>
	<div id = "output"></div>
	<script>
		const output = document.getElementById('output');
		document.getElementById('container').addEventListener('click', function(event) {
			output.innerHTML += 'Capturing phase - Container clicked' + "<br>";
		}, true);

		document.getElementById('myButton').addEventListener('click', function(event) {
			output.innerHTML += 'Capturing phase - Button clicked' + "<br>";
		}, true);
	</script>
</body>
</html>

示例：阻止預設行為

在這個例子中，我們有一個帶有 id 為“link”的超連結(<a>)。捕獲階段事件監聽器在捕獲階段附加到連結上。當你點選連結時，捕獲階段日誌訊息（連結被點選）將被顯示，並且使用 event.preventDefault() 阻止了預設行為（導航到新頁面）。

如果沒有使用 .preventDefault()，它將把頁面導航到 https://tutorialspoint.tw。

<!DOCTYPE html>
<html>
<body>
	<a href="https://tutorialspoint.tw" id="link">Click me to prevent default</a>
	<script>
		document.getElementById('link').addEventListener('click', function(event) {
			alert('Capturing phase - Link clicked');
			event.preventDefault(); // Prevent the default behavior (e.g., navigating to a new page)
		}, true);
	</script>
</body>
</html>

示例：捕獲和停止傳播

在這個例子中，父 div 的捕獲階段事件監聽器透過使用 'event.stopPropagation()' 主動停止傳播。只有在點選按鈕時，你才會看到捕獲階段期間顯示的日誌訊息（“父元素被點選”）；但是，它不會觸發子元素捕獲階段中的任何進一步操作。這確實展示了一種在這種情況下來阻止額外傳播的有效方法。

<!DOCTYPE html>
<html>
<body>
	<div id="parent">
		<button id="child">Click me!</button>
	</div>
	<div id = "output"></div>
	<script>
		const output = document.getElementById('output');
		document.getElementById('parent').addEventListener('click', function(event) {
			output.innerHTML += 'Capturing phase - Parent clicked' + "<br>";
			// Stop further propagation to the child element
			event.stopPropagation();
		}, true);
		document.getElementById('child').addEventListener('click', function(event) {
			output.innerHTML += 'Capturing phase - Child clicked' + "<br>";
		}, true);
	</script>
</body>
</html>

列印頁面