JavaScript - 事件冒泡：初学者指南

你好，未来的 JavaScript 巫师們！? 今天，我們將踏上一段令人興奮的旅程，探索事件冒泡的神秘世界。別擔心如果你之前從未聽說過它——在這個教學結束時，你將會湧現出知識！（看我在這裡幹了什麼？?）

JavaScript - Event Bubbling

什麼是事件冒泡？

想像你在一個家族聚會中，你給你的表哥講了一個笑話。你的表哥笑了，然後你的嬸嬸聽見了，也笑了，接著你的祖父母也開始咯咯笑。這就像是 JavaScript 中的事件冒泡！

從技術角度來說，事件冒泡是一種在 HTML DOM（文件對象模型）樹中事件傳播的方式。當一個元素上發生事件時，它首先運行它自己的事件處理程序，然後在它的父元素上運行，一直上溯到其他祖先元素。

讓我們用一個簡單的例子來分解這個過程：

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

document.getElementById('child').addEventListener('click', function() {
console.log('子元素被點擊！');
});

document.getElementById('parent').addEventListener('click', function() {
console.log('父元素被點擊！');
});

document.getElementById('grandparent').addEventListener('click', function() {
console.log('祖父元素被點擊！');
});

如果你點擊按鈕，你會在控制台看到這樣的輸出：

子元素被點擊！
父元素被點擊！
祖父元素被點擊！

這就是事件冒泡的作用！事件從按鈕（子元素）開始，然後冒泡到它的父元素，最後到達祖父元素。

事件冒泡的步驟

既然我們已經理解了基本概念，讓我們分解事件冒泡的步驟：

事件在最深的元素（目標元素）上發生。
目標元素上的事件處理程序運行。
事件冒泡到父元素，並運行其事件處理程序。
這個過程持續，直到達到 document 對象。

這就像一場「傳遞包裹」的遊戲，當事件在 DOM 樹中上移時，每個元素都有機會處理事件。

使用兩個嵌套的 DIV 進行事件冒泡

讓我們看一個使用兩個嵌套 div 的更具體的例子：

<div id="outer" style="background-color: blue; padding: 20px;">
<div id="inner" style="background-color: red; padding: 20px;">
點我！
</div>
</div>

document.getElementById('outer').addEventListener('click', function() {
console.log('外層 div 被點擊');
});

document.getElementById('inner').addEventListener('click', function() {
console.log('內層 div 被點擊');
});

當你點擊內層的紅色 div 時，你會看到：

內層 div 被點擊
外層 div 被點擊

事件從內層 div 開始，然後冒泡到外層 div。這就像投擲一顆小石頭進入池塘——水波從中心開始，向外擴散！

使用三個嵌套層次進行事件冒泡

現在，讓我們在例子中增加一個層次：

<div id="grandparent" style="background-color: green; padding: 20px;">
<div id="parent" style="background-color: blue; padding: 20px;">
<div id="child" style="background-color: red; padding: 20px;">
點我！
</div>
</div>
</div>

document.getElementById('grandparent').addEventListener('click', function() {
console.log('祖父 div 被點擊');
});

document.getElementById('parent').addEventListener('click', function() {
console.log('父 div 被點擊');
});

document.getElementById('child').addEventListener('click', function() {
console.log('子 div 被點擊');
});

現在，當你點擊最內層的紅色 div 時，你會看到：

子 div 被點擊
父 div 被點擊
祖父 div 被點擊

這就像一個家族的等級——最年輕的先說話，然後是父母，最後是祖父母！

停止事件冒泡

有時候，你可能想要停止這種冒泡行為。也許你不想讓祖父母聽到那個笑話！在 JavaScript 中，我們可以使用 stopPropagation() 方法來做到這一點：

document.getElementById('child').addEventListener('click', function(event) {
console.log('子 div 被點擊');
event.stopPropagation();
});

現在，當你點擊子 div 時，你只會看到：

子 div 被點擊

事件就在那裡停止了，就像把木塞塞進瓶子一樣！

事件處理的有用方法

這裡有一個 JavaScript 中事件處理的有用方法表格：

方法	描述
`addEventListener()`	將事件處理程序附加到元素
`removeEventListener()`	從元素中移除事件處理程序
`event.stopPropagation()`	停止事件在 DOM 樹中的冒泡
`event.preventDefault()`	阻止事件的默認行為
`event.target`	返回觸發事件的元素
`event.currentTarget`	返回事件處理程序被觸發的元素

結論

好了，各位！我們已經通過事件冒泡的概念在 JavaScript 中冒泡了起來。記住，理解事件冒泡對於管理你網頁應用程序中的複雜事件處理至關重要。這就像理解家族聚會上的家族動力——知道誰聽到了什麼，以及何時聽到的，可以節省你很多困惑！

用這些例子練習，嘗試不同的嵌套結構，不久你將會像專業人士一樣處理事件。快樂編程，願你的事件總是順利冒泡！?

Credits: Image by storyset