在 JavaScript 中，事件冒泡和捕獲是事件傳播的兩種機制。當一個事件（如點擊、按鍵等）發生在某個元素上時，瀏覽器會按照事件冒泡或捕獲的順序執行一系列的事件處理函數。了解這兩種機制及其運用可以幫助我們更好地控制和處理事件。
事件冒泡（Event Bubbling）
事件冒泡是指事件從觸發元素開始，逐級向上傳播到最外層的根元素。在這個過程中，每一層元素都可以監聽該事件，并執行相應的事件處理函數。事件冒泡的優點是可以方便地處理跨組件的事件，但缺點是可能導致不必要的處理函數執行。
運用事件冒泡的示例：
<!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>
<script>
document.querySelector('.outer').addEventListener('click', function() {
alert('Outer element clicked');
});
document.querySelector('.inner').addEventListener('click', function(event) {
alert('Inner element clicked');
});
</script>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
在這個示例中，當點擊內部元素時，會先觸發內部元素的點擊事件處理函數，然后觸發外部元素的點擊事件處理函數。
事件捕獲（Event Capturing）
事件捕獲是指事件從最外層的根元素開始，逐級向下傳播到觸發元素的父元素。在這個過程中，每一層元素都可以監聽該事件，并執行相應的事件處理函數。事件捕獲的優點是可以提前處理事件，但缺點是可能導致不必要的事件處理函數執行。
運用事件捕獲的示例：
<!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>
<script>
document.querySelector('.outer').addEventListener('click', function() {
alert('Outer element clicked');
}, true); // 使用事件捕獲
document.querySelector('.inner').addEventListener('click', function(event) {
alert('Inner element clicked');
});
</script>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
在這個示例中，當點擊內部元素時，會先觸發外部元素的點擊事件處理函數，然后觸發內部元素的點擊事件處理函數。
總結
事件冒泡和事件捕獲都可以用于處理跨組件的事件，但它們的執行順序不同。事件冒泡從觸發元素向上傳播，而事件捕獲從根元素向下傳播。在實際應用中，可以根據需要選擇使用事件冒泡或事件捕獲。
