使用Event Bubbling操縱DOM：JS開發實踐

一、Event Bubbling是什麼

Event Bubbling（事件冒泡）是DOM事件中的一種機制。當某一元素上發生了某個事件，例如click事件，這個事件會從該元素開始逐級向上傳播，直到傳到Document為止。這一過程就像氣泡從水底冒起，逐漸擴大至水面。

可以通過Event Bubbling機制，在一個父元素上監聽它的所有子元素的某個事件，從而實現對子元素進行操作的效果。這一機制可以大大簡化開發過程，提高程序的性能以及可讀性。

二、如何使用Event Bubbling操作DOM

在HTML中，元素嵌套是嵌套使用Event Bubbling的基礎。在JS中，可以通過addEventListener方法來實現Event Bubbling。該方法的調用方式如下：

parentElement.addEventListener(eventType, function(event) {
  // 在此處對子元素進行操作
});

在這裡，parentElement指父元素，eventType指監聽的事件的類型。在匿名函數中，傳入的event對象包含了與事件相關的信息，例如事件源和事件類型等。在函數中，可以通過event.target屬性訪問事件的目標元素。

三、如何避免Event Bubbling的副作用

Event Bubbling機制的一大副作用就是可能導致事件的多次觸發。例如，當一個button元素被點擊時，它所在的父元素也可能會觸發click事件。而在同一父元素中，所有兄弟元素也都有可能觸發該事件，這樣一來就會出現多次觸發的情況。為了避免這種情況，可以通過event.stopPropagation()方法來阻止事件的傳播。該方法的調用方式如下：

childElement.addEventListener(eventType, function(event) {
  // 在此處對子元素進行操作，同時阻止事件冒泡
  event.stopPropagation();
});

在這裡，childElement指子元素，eventType指監聽的事件的類型。在匿名函數中，調用event.stopPropagation()方法來阻止事件向上傳播。

四、使用Event Bubbling的實際應用

一個常見的使用Event Bubbling的實例是實現一個可點擊的菜單。通過監聽菜單的父元素（例如一個

元素），並根據事件目標元素的class屬性判斷點擊了哪個子元素，從而執行對應的操作。

以下是一個簡單的菜單示例代碼：

<ul id="menu">
  <li class="item">菜單項1</li>
  <li class="item">菜單項2</li>
  <li class="item">菜單項3</li>
  <li class="item">菜單項4</li>
</ul>

<script>
var menu = document.getElementById('menu');
menu.addEventListener('click', function(event) {
  // 判斷是否為菜單項
  if (event.target.classList.contains('item')) {
    // 執行對應的操作
    console.log('點擊了' + event.target.innerHTML);
  }
});
</script>

在這裡，使用addEventListener方法監聽menu元素上的click事件。在匿名函數中，通過event.target.classList.contains(‘item’)判斷點擊的目標元素是否具有item類，如果是，則輸出對應的操作結果。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/289340.html