JavaScript - 事件捕捉：初学者的指南

你好，未来的 JavaScript 巫師們！今天，我們將踏上一段令人興奮的旅程，進入事件捕捉的世界。別擔心如果你從未寫過一行代碼——我將成為你友善的導遊，我們將一起逐步探索這個概念。所以，拿起你喜歡的飲料，讓我們開始吧！

JavaScript - Event Capturing

什麼是事件捕捉？

在我們深入細節之前，讓我們從一個簡單的比喻開始。想像你在家族聚會中，你可愛的小表弟說了一些有趣的事情。笑聲從你的祖父母（最老的世代）開始，然後傳到你父母，最後到達你。這與 JavaScript 中的事件捕捉工作原理相似！

在網頁開發的世界中，事件捕捉是事件傳播中的一個階段，事件首先被最外層的元素捕捉，然後傳播到內部元素。這就像一場「傳遞包裹」遊戲，但用的是事件！

現在，讓我們將這個概念分解成更技術性的術語：

當網頁上發生事件（例如點擊）時，它不僅發生在你點擊的元素上。
事件從 DOM（文件對象模型）樹的頂部開始。
然後它通過所有父元素，直到達到目標元素。
這個向下的過程就是我們所謂的「事件捕捉」。

示例：基本事件捕捉

讓我們看一個基本示例，以觀察事件捕捉是如何工作的。我們將創建一個簡單的 HTML 構架，並添加一些 JavaScript 來演示捕捉是如何工作的。

<div id="outer">
<div id="middle">
<div id="inner">點我！</div>
</div>
</div>

<script>
const outer = document.getElementById('outer');
const middle = document.getElementById('middle');
const inner = document.getElementById('inner');

outer.addEventListener('click', function() {
console.log('外部 div 被點擊');
}, true);

middle.addEventListener('click', function() {
console.log('中間 div 被點擊');
}, true);

inner.addEventListener('click', function() {
console.log('內部 div 被點擊');
}, true);
</script>

在這個示例中，我們有三個嵌套的 <div> 元素。JavaScript 代碼為每個 div 添加了點擊事件監聽器。addEventListener 中的 true 參數啟用了事件捕捉。

當你點擊最內层的 div 時，你會在控制台看到以下輸出：

外部 div 被點擊
中間 div 被點擊
內部 div 被點擊

這顯示了事件從最外層元素捕捉到最內層元素的过程。就像事件在說「你好！」，在達到目標之前向每個父元素問候。

示例：防止默認行為

有時，我們想要阻止事件的默認行為。例如，防止表單提交或链接被跟隨。讓我們看看如何使用事件捕捉來做到這點：

<div id="container">
<a href="https://www.example.com" id="link">點我！</a>
</div>

<script>
const container = document.getElementById('container');
const link = document.getElementById('link');

container.addEventListener('click', function(event) {
console.log('容器被點擊');
event.preventDefault();
}, true);

link.addEventListener('click', function(event) {
console.log('链接被點擊');
}, true);
</script>

在這個示例中，我們有一個包含链接的容器 div。容器的時間監聽器使用 event.preventDefault() 來阻止链接的默認行為。

當你點擊链接時，你會看到：

容器被點擊
链接被點擊

但链接實際上不會帶你到 URL。就像容器在說，「不，我們就待在這裡！」

示例：捕捉並阻止傳播

有時，我們可能想要阻止事件進一步在 DOM 樹中向下傳播。我們可以使用 event.stopPropagation() 來做到這點。讓我們看看如何：

<div id="grandparent">
<div id="parent">
<div id="child">點我！</div>
</div>
</div>

<script>
const grandparent = document.getElementById('grandparent');
const parent = document.getElementById('parent');
const child = document.getElementById('child');

grandparent.addEventListener('click', function(event) {
console.log('祖父被點擊');
}, true);

parent.addEventListener('click', function(event) {
console.log('父親被點擊');
event.stopPropagation();
}, true);

child.addEventListener('click', function(event) {
console.log('子元素被點擊');
}, true);
</script>

在這個以家族為主題的示例中，當你點擊子元素 div 時，你只會看到：

祖父被點擊
父親被點擊

事件在父元素停止，從不達到子元素。就像父親在說，「夠了，年輕的事件！」

總結

好了，各位！我們已經穿越了事件捕捉的土地，從基本概念到防止默認行為和阻止傳播。記住，事件捕捉只是 JavaScript 中事件流程的一部分。它就像開場之前的主要事件（雙關語）。

這裡是我們使用過的方法的快速總結：

方法	描述
`addEventListener(event, function, useCapture)`	將事件處理器附加到元素。將 `useCapture` 設為 `true` 以啟用事件捕捉。
`event.preventDefault()`	阻止事件的默認行為。
`event.stopPropagation()`	阻止事件在 DOM 樹中進一步冒泡，防止通知父級處理器事件。

練習這些概念，玩轉代碼，很快你就能像專家一樣捕捉事件了！記住，在編程中，就像在生活中，旅程和目的地一樣重要。開心地編程，願你的事件總是被妥善捕捉！

Credits: Image by storyset