在 JavaScript 中，事件冒泡和事件捕獲是兩種事件傳播的機制。它們決定了事件從哪個元素開始觸發，以及是否繼續向父元素傳播。理解這兩種機制對于有效地處理用戶交互非常重要。
事件冒泡是指事件從觸發元素開始，逐級向上傳播到最外層的元素。在這個過程中，每個元素的事件處理函數都會被調用。通常，我們會在文檔的根元素（如 window 或 document）上監聽事件，以便在事件冒泡過程中捕獲到該事件。
使用事件冒泡的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Bubbling Example</title>
<style>
.outer { width: 200px; height: 200px; background-color: red; }
.inner { width: 100px; height: 100px; background-color: blue; }
</style>
</head>
<body>
<div class="outer" onclick="handleEvent(event)">
<div class="inner" onclick="handleEvent(event)"></div>
</div>
<script>
function handleEvent(event) {
alert('Event triggered at: ' + event.target.nodeName);
}
</script>
</body>
</html>
在這個示例中，當你點擊內部的 div 時，它會觸發 handleEvent 函數，并顯示一個警告框，表明事件觸發在 div 元素上。由于事件冒泡，點擊外部 div 也會觸發該函數。
事件捕獲是指事件從最外層的元素開始，逐級向下傳播到觸發元素的階段。在這個過程中，每個元素的事件處理函數都會被調用。你可以使用 addEventListener 方法的第三個參數來指定是否使用事件捕獲。
使用事件捕獲的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Capturing Example</title>
<style>
.outer { width: 200px; height: 200px; background-color: red; }
.inner { width: 100px; height: 100px; background-color: blue; }
</style>
</head>
<body>
<div class="outer" id="outer">
<div class="inner" id="inner"></div>
</div>
<script>
document.getElementById('outer').addEventListener('click', function() {
alert('Event captured at: outer');
}, true); // 使用事件捕獲
document.getElementById('inner').addEventListener('click', function() {
alert('Event captured at: inner');
}, true); // 使用事件捕獲
</script>
</body>
</html>
在這個示例中，當你點擊內部的 div 時，會先觸發外部 div 的捕獲事件處理函數，然后觸發內部 div 的捕獲事件處理函數。這與事件冒泡的行為相反。
你可以根據需要選擇使用事件冒泡或事件捕獲。通常，事件冒泡更常用，因為它允許你在不直接操作觸發元素的情況下處理事件。然而，在某些特定場景下，事件捕獲可能更適合。
