<div 冒泡事件
<div> 元素是 HTML 中常用的一個容器，用于將文檔分割為獨立的、互不影響的部分。在 HTML 中，<div> 元素通常用于定義網頁的不同區塊，使網頁結構更清晰易讀。除了常規的用途以外，<div> 元素還可以用于處理事件，其中包括冒泡事件。
在 JavaScript 中，div 冒泡事件是一種事件傳播機制，指的是當一個事件被觸發時，該事件將沿著 DOM 樹向上傳播，直到到達根節點或被停止。冒泡機制允許我們在父元素上處理事件，從而簡化事件處理的代碼邏輯。
下面將通過幾個代碼案例詳細解釋說明 div 冒泡事件的使用。
代碼案例一：

html
<div id="outer">
<div id="inner">
<button id="btn">點擊我</button>
</div>
</div>
<script>
document.getElementById("outer").addEventListener("click", function(event) {
console.log("點擊了外部容器");
});
<br>
  document.getElementById("inner").addEventListener("click", function(event) {
console.log("點擊了內部容器");
event.stopPropagation();
});
<br>
  document.getElementById("btn").addEventListener("click", function(event) {
console.log("點擊了按鈕");
});
</script>

在上述代碼中，我們創建了一個包含嵌套的 div 元素，并在內部 div 元素中嵌入了一個按鈕。我們為外部容器、內部容器和按鈕都綁定了點擊事件。當點擊按鈕時，按鈕的點擊事件會被觸發，并打印出"點擊了按鈕"。此外，內部容器也會觸發點擊事件，并打印出"點擊了內部容器"。然而，外部容器的點擊事件不會被觸發，因為內部容器的點擊事件調用了 event.stopPropagation() 方法，阻止事件冒泡。
代碼案例二：

html
<div id="outer">
<div id="inner">
<button id="btn">點擊我</button>
</div>
</div>
<script>
document.getElementById("outer").addEventListener("click", function(event) {
console.log("點擊了外部容器");
});
<br>
  document.getElementById("inner").addEventListener("click", function(event) {
console.log("點擊了內部容器");
});
<br>
  document.getElementById("btn").addEventListener("click", function(event) {
console.log("點擊了按鈕");
});
</script>

在上述代碼中，我們同樣創建了一個包含嵌套的 div 元素，并為外部容器、內部容器和按鈕都綁定了點擊事件。與上一個例子不同的是，這里沒有調用 event.stopPropagation() 方法。結果是，當點擊按鈕時，除了觸發按鈕自身的點擊事件（打印"點擊了按鈕"）外，內部容器的點擊事件也會觸發，打印"點擊了內部容器"。此外，外部容器的點擊事件也會被觸發，打印"點擊了外部容器"。這是因為事件冒泡機制使得事件向上傳播至包含元素。
綜上所述，div 冒泡事件是一種事件傳播機制，使得事件可以在父元素上進行處理。通過調用 event.stopPropagation() 方法，可以阻止事件繼續向上傳播。掌握 div 冒泡事件的使用，能夠簡化事件處理的邏輯，提高代碼的可維護性和重用性。