JavaScript 事件冒泡和事件捕獲

JavaScript 事件冒泡和事件捕獲是兩種處理 DOM 事件機制的方式，它們的區別在哪裡呢？本文將會從以下幾個方面進行詳細闡述：

一、事件冒泡和事件捕獲的簡介

事件冒泡和事件捕獲是 DOM 事件機制中觸發事件後處理過程中兩種不同的捕獲方式。

在事件冒泡（bubbling）模式中，事件首先在觸發元素上被捕獲，然後沿著 DOM 樹向上傳遞，直到到達文檔的根節點。在此過程中，會觸發所有的父元素的相應事件處理函數。

而在事件捕獲（capturing）模式中，事件首先被捕獲到文檔的根節點，然後從根節點沿著 DOM 樹一層層向下傳遞，直到到達觸發元素。在此過程中，會觸發所有的父元素的相應事件處理函數。

二、事件冒泡和事件捕獲的區別

1、觸發順序不同

在事件冒泡模式中，事件處理的順序是從觸發元素開始，由內向外逐步冒泡，最終到達 document 元素。

而在事件捕獲模式中，事件處理的順序是從 document 元素開始，由外向內逐步捕獲，最終到達觸發元素。

2、事件處理的方式不同

在事件冒泡模式中，事件的處理方式是先從子節點開始，再向父節點傳遞。也就是說，先觸發節點自己的事件處理函數，再依次觸發父元素的事件處理函數。

而在事件捕獲模式中，事件的處理方式是先從父節點開始，再向子節點傳遞。也就是說，先觸發 document 的事件處理函數，然後依次觸發子節點的事件處理函數。

3、默認事件優先順序不同

默認情況下，事件冒泡和事件捕獲模式都會觸發默認的事件處理函數。但是，在事件冒泡模式中默認的事件處理函數會在所有的父節點處理完之後再觸發，而在事件捕獲模式中默認的事件處理函數則會在到達目標元素之前被觸發。

三、代碼示例

1、事件冒泡模式的代碼示例

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

    <script>
      const grandparent = document.querySelector('#grandparent');
      const parent = document.querySelector('#parent');
      const button = document.querySelector('#button');

      grandparent.addEventListener('click', function() {
        console.log('觸發 grandparent 的點擊事件處理函數');
      }, false);

      parent.addEventListener('click', function() {
        console.log('觸發 parent 的點擊事件處理函數');
      }, false);

      button.addEventListener('click', function() {
        console.log('觸發 button 的點擊事件處理函數');
      }, false);
    </script>
  

在上面的代碼中，當我們點擊 button 按鈕時，輸出的結果是：

  
  觸發 button 的點擊事件處理函數
  觸發 parent 的點擊事件處理函數
  觸發 grandparent 的點擊事件處理函數
  

由此可見，事件處理是從子節點開始，依次向上父節點冒泡傳遞。

2、事件捕獲模式的代碼示例

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

    <script>
      const grandparent = document.querySelector('#grandparent');
      const parent = document.querySelector('#parent');
      const button = document.querySelector('#button');

      grandparent.addEventListener('click', function () {
        console.log('觸發 grandparent 的點擊事件處理函數');
      }, true);

      parent.addEventListener('click', function () {
        console.log('觸發 parent 的點擊事件處理函數');
      }, true);

      button.addEventListener('click', function () {
        console.log('觸發 button 的點擊事件處理函數');
      }, true);
    </script>
  

在上面的代碼中，當我們點擊 button 按鈕時，輸出的結果是：

  
  觸發 grandparent 的點擊事件處理函數
  觸發 parent 的點擊事件處理函數
  觸發 button 的點擊事件處理函數
  

由此可見，事件處理是從 document 節點開始，依次向下子節點傳遞。

四、總結

事件冒泡和事件捕獲是 JavaScript 中用於處理 DOM 事件機制的兩種不同的方式。區別在於事件的觸發順序、事件的處理方式以及默認事件的觸發時機等。在實際開發中，可以根據具體需求選擇使用合適的方式。