快捷導(dǎo)航

JavaScript事件機(jī)制之捕獲、冒泡與事件委托詳解

更新時(shí)間：2025年11月26日 10:47:03 作者：秋氘漁

JavaScript事件機(jī)制是指在JavaScript中處理用戶交互或其他事件的機(jī)制,這篇文章主要介紹了JavaScript事件機(jī)制之捕獲、冒泡與事件委托的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

1.什么是JavaScript的事件機(jī)制？

JavaScript的事件機(jī)制一共分為三個(gè)部分，分別是事件捕獲，事件冒泡和事件委托。

（1）事件捕獲：指的是事件從根節(jié)點(diǎn)（document節(jié)點(diǎn)）向目標(biāo)事件傳播的過程。

（2）事件冒泡：指的是當(dāng)捕獲到目標(biāo)事件之后從目標(biāo)事件開始向上傳播（傳播至Document節(jié)點(diǎn)）的過程。

（3）事件委托：指的是利用事件冒泡機(jī)制，在對應(yīng)子元素的父元素節(jié)點(diǎn)上綁定事件處理器，避免對多個(gè)子元素分別綁定事件監(jiān)聽器。這樣做可以顯著減少內(nèi)存占用和事件處理器的數(shù)量，提升頁面性能，尤其是在子元素?cái)?shù)量很多或動態(tài)生成的場景下，事件委托能降低瀏覽器的事件管理開銷，提高響應(yīng)效率和代碼維護(hù)性。

想要掌握好JavaScript中的事件機(jī)制，首先掌握好事件是如何被捕獲的（事件捕獲階段），捕獲到了事件是怎么觸發(fā)的（事件執(zhí)行階段），事件觸發(fā)之后會怎么樣（事件冒泡階段）。理解這些之后就知道如何利用事件冒泡來進(jìn)行事件委托了。

2.DOM樹

在講述事件機(jī)制之前，首先掌握一個(gè)概念，什么是DOM樹。理解了DOM樹可以讓我們更好的理解事件的觸發(fā)和冒泡過程。

什么是DOM樹？

DOM（文檔對象模型，Document Object Model）是瀏覽器解析HTML后生成的一個(gè)樹狀結(jié)構(gòu)。
每個(gè)HTML標(biāo)簽、文本節(jié)點(diǎn)、屬性都會被表示成DOM樹上的一個(gè)節(jié)點(diǎn)。
通過DOM樹，JavaScript可以訪問、修改網(wǎng)頁內(nèi)容和結(jié)構(gòu)。

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="container">
      <button id="btn">點(diǎn)擊我</button>
    </div>

</body>
</html>

DOM樹為：

Document
└── html
└── body
└── div#container
└── button#btn (文本節(jié)點(diǎn): "點(diǎn)擊我")

3.事件觸發(fā)流程

假設(shè)我們在上面HTML中給按鈕和它的父元素div都綁定點(diǎn)擊事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="container">
      <button id="btn">點(diǎn)擊我</button>
    </div>

    <script>
      const container = document.getElementById('container');
      const btn = document.getElementById('btn');

      container.addEventListener('click', () => {
        console.log('容器被點(diǎn)擊');
      });

      btn.addEventListener('click', () => {
        console.log('按鈕被點(diǎn)擊');
      });
    </script>


</body>
</html>

事件觸發(fā)流程：

當(dāng)用戶點(diǎn)擊按鈕時(shí)，瀏覽器根據(jù)DOM樹找到事件目標(biāo)（button）。
事件先從document開始捕獲，經(jīng)過html、body、div，最后到button（捕獲階段）。明事件捕獲默認(rèn)是不啟用的，需要在addEventListener第三個(gè)參數(shù)設(shè)置為true才會執(zhí)行捕獲階段的監(jiān)聽。否則事件監(jiān)聽默認(rèn)只在目標(biāo)階段和冒泡階段觸發(fā)。
事件在button上觸發(fā)（目標(biāo)階段）。
事件從button向上冒泡，經(jīng)過div、body、html、document（冒泡階段）。
綁定在button和container上的事件都會被觸發(fā)，輸出：按鈕被點(diǎn)擊容器被點(diǎn)擊。

從上述案例我們可以看出，當(dāng)我們在給一個(gè)事件綁定了監(jiān)聽器之后，如果該監(jiān)聽器被觸發(fā)了，瀏覽器首先需要找到目標(biāo)元素（捕獲階段），找到目標(biāo)元素之后瀏覽器會觸發(fā)當(dāng)前元素綁定的事件監(jiān)聽器的事件（目標(biāo)階段），當(dāng)執(zhí)行完當(dāng)前的事件之后會繼續(xù)沿著DOM樹向上觸發(fā)（冒泡階段），由于<div id="container">是該按鈕的父元素并且也綁定了事件監(jiān)聽，所以也會觸發(fā)，直至傳遞到根節(jié)點(diǎn)。

4. 如何利用事件冒泡機(jī)制（事件委托）

假設(shè)你有一個(gè)列表，里面有很多條目，每條目都有一個(gè)“刪除”按鈕：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul id="list">
      <li>項(xiàng)目1 <button class="delete-btn">刪除</button></li>
      <li>項(xiàng)目2 <button class="delete-btn">刪除</button></li>
      <li>項(xiàng)目3 <button class="delete-btn">刪除</button></li>
      <!-- 可能還有更多項(xiàng)目 -->
    </ul>


</body>
</html>

（1）傳統(tǒng)做法（不使用事件委托）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul id="list">
      <li>項(xiàng)目1 <button class="delete-btn">刪除</button></li>
      <li>項(xiàng)目2 <button class="delete-btn">刪除</button></li>
      <li>項(xiàng)目3 <button class="delete-btn">刪除</button></li>
      <!-- 可能還有更多項(xiàng)目 -->
    </ul>
    <script>
        const deleteButtons = document.querySelectorAll('.delete-btn');
        deleteButtons.forEach(btn => {
          btn.addEventListener('click', function() {
            const li = this.parentElement;
            li.remove();
            console.log('刪除了一個(gè)項(xiàng)目');
          });
        });

    </script>


</body>
</html>

我們發(fā)現(xiàn)，如果想要點(diǎn)擊按鈕就刪除對應(yīng)元素，我們可以給每一個(gè)按鈕都綁定事件監(jiān)聽器來達(dá)到效果。這樣對于少部分的事件其實(shí)并沒有什么影響，但是如果事件很多的情況下，綁定大量事件監(jiān)聽器會消耗內(nèi)存和性能。而且如果后來還需要動態(tài)添加新的項(xiàng)目，則需要額外綁定事件。

（2）利用事件冒泡機(jī)制（事件委托）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul id="list">
      <li>項(xiàng)目1 <button class="delete-btn">刪除</button></li>
      <li>項(xiàng)目2 <button class="delete-btn">刪除</button></li>
      <li>項(xiàng)目3 <button class="delete-btn">刪除</button></li>
      <!-- 可能還有更多項(xiàng)目 -->
    </ul>
    <script>
        const list = document.getElementById('list');

        list.addEventListener('click', function(event) {
          // 利用事件冒泡，判斷點(diǎn)擊目標(biāo)是否是刪除按鈕
          if (event.target && event.target.classList.contains('delete-btn')) {
            const li = event.target.parentElement;
            li.remove();
            console.log('刪除了一個(gè)項(xiàng)目（事件委托）');
          }
        });

    </script>


</body>
</html>

從上述案例我們可以發(fā)現(xiàn)，我們只綁定了一個(gè)事件監(jiān)聽（ul），但是當(dāng)子元素（li）觸發(fā)點(diǎn)擊事件之后,我們并沒有對子元素綁定事件處理，但是也能夠進(jìn)行刪除操作，這是因?yàn)樽釉氐氖录刂鳧OM樹向上傳播，當(dāng)傳播到ul節(jié)點(diǎn)的時(shí)候觸發(fā)了ul的事件處理機(jī)制。所以進(jìn)行了刪除。

5.如何阻止事件冒泡

當(dāng)我們希望事件只在某個(gè)特定元素上響應(yīng)，而不影響其父元素或祖先元素時(shí)，可以使用 event.stopPropagation() 來阻止事件冒泡。

此外，如果希望不僅阻止事件冒泡，還阻止當(dāng)前元素上后續(xù)的同類型事件監(jiān)聽器執(zhí)行，可以使用 event.stopImmediatePropagation()。

區(qū)別：

event.stopPropagation()：阻止事件繼續(xù)冒泡到父元素，但當(dāng)前元素上綁定的其他同類型事件監(jiān)聽器仍會執(zhí)行。
event.stopImmediatePropagation()：阻止事件冒泡，并且阻止當(dāng)前元素上后續(xù)同類型事件監(jiān)聽器的執(zhí)行。

案例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>阻止事件冒泡案例</title>
</head>
<body>
  <div id="outer" style="padding:20px; border:1px solid #ccc;">
    外層容器（點(diǎn)擊會觸發(fā)）
    <button id="inner">點(diǎn)擊我</button>
  </div>

  <script>
    const outer = document.getElementById('outer');
    const inner = document.getElementById('inner');

    outer.addEventListener('click', () => {
      console.log('【外層容器】點(diǎn)擊事件觸發(fā)');
    });

    // 監(jiān)聽器1：使用 stopPropagation()
    inner.addEventListener('click', (event) => {
      event.stopPropagation();  // 阻止事件冒泡，父元素的點(diǎn)擊事件不會觸發(fā)
      console.log('【按鈕監(jiān)聽器1】點(diǎn)擊事件觸發(fā)，事件冒泡被阻止，父元素不會收到事件');
    });

    // 監(jiān)聽器2：同一元素上的另一個(gè)監(jiān)聽器
    inner.addEventListener('click', () => {
      console.log('【按鈕監(jiān)聽器2】點(diǎn)擊事件觸發(fā)，仍然執(zhí)行');
    });

    /*
    // 如果改為使用 stopImmediatePropagation()，效果如下：
    inner.addEventListener('click', (event) => {
      event.stopImmediatePropagation();  // 阻止事件冒泡，且阻止后續(xù)監(jiān)聽器執(zhí)行
      console.log('【按鈕監(jiān)聽器1】點(diǎn)擊事件觸發(fā)，事件冒泡和后續(xù)監(jiān)聽器執(zhí)行被阻止，父元素不會收到事件');
    });

    inner.addEventListener('click', () => {
      console.log('【按鈕監(jiān)聽器2】不會執(zhí)行');
    });
    */
  </script>
</body>
</html>

使用 stopPropagation() 時(shí)：

點(diǎn)擊按鈕會輸出：

【按鈕監(jiān)聽器1】點(diǎn)擊事件觸發(fā)，事件冒泡被阻止，父元素不會收到事件
【按鈕監(jiān)聽器2】點(diǎn)擊事件觸發(fā)，仍然執(zhí)行

使用 stopImmediatePropagation() 時(shí)：

點(diǎn)擊按鈕只會輸出：

【按鈕監(jiān)聽器1】點(diǎn)擊事件觸發(fā)，事件冒泡和后續(xù)監(jiān)聽器執(zhí)行被阻止，父元素不會收到事件

6.總結(jié)

JavaScript事件機(jī)制包括三個(gè)主要階段：
1. 捕獲階段：事件從document節(jié)點(diǎn)向目標(biāo)元素逐層傳遞，監(jiān)聽器在此階段觸發(fā)需設(shè)置capture為true。
2. 目標(biāo)階段：事件到達(dá)目標(biāo)元素，觸發(fā)綁定在目標(biāo)元素上的事件監(jiān)聽器。
3. 冒泡階段：事件從目標(biāo)元素向上傳播到document，觸發(fā)沿途元素綁定的冒泡監(jiān)聽器。
事件冒泡機(jī)制允許我們通過事件委托，只在父元素上綁定事件監(jiān)聽器，利用事件冒泡捕獲子元素事件，極大優(yōu)化性能和代碼維護(hù)。
在需要阻止事件傳播時(shí)，可使用event.stopPropagation()阻止冒泡，避免父元素響應(yīng)事件；使用event.stopImmediatePropagation()則進(jìn)一步阻止當(dāng)前元素上后續(xù)同類型監(jiān)聽器執(zhí)行。
事件監(jiān)聽器默認(rèn)在目標(biāo)階段和冒泡階段觸發(fā)，捕獲階段監(jiān)聽需要顯式開啟