簡單來說，就是事件在 DOM 裡面傳遞的順序，以及你可以對這些事件做什麼。

為什麼會有「傳遞順序」這一詞呢？假設你有一個 ul 元素，底下有很多 li，代表不同的 item。當你點擊任何一個 li 的時候，其實你也點擊了 ul，因為 ul 把所有的 li 都包住了。

先來看這張圖：

當我們觸發某元素的事件時，會出現三個事件階段：

1. capture phase 捕獲階段
   意思就是當我點擊 td 的時候，瀏覽器從 window 出發，經過每個節點，到達 td 前，叫做捕獲。
2. target phase 目標階段
   td 階段。
3. bubbling phase 冒泡階段
   當捕獲到 td 時，會一路從 td 回到 window，這一段叫做冒泡。

補充：addEventListener 方法中有第三個參數 boolean：

addEventListener('事件', callback, boolean)

當 boolean 為 true，設定「監聽事件」在捕獲階段。
當 boolean 為 false，設定「監聽事件」在冒泡階段。

範例程式碼：


HTML:

<div class="outer">
  <div class="inner">
    <button class="btn">click me</button>
  </div>
</div>

JS:

document.addEventListener('DOMContentLoaded',function(){
  addEvent('.outer')
  addEvent('.inner')
  addEvent('.btn')

  function addEvent(className) {
    document.querySelector(className)
      .addEventListener('click',function(e) {
        console.log(className, '捕獲')
      }, true)
    document.querySelector(className)
      .addEventListener('click',function(e) {
        console.log(className, '冒泡')
      }, false) 
  }
})

當我點擊 click 的時候，捕獲階段跟冒泡階段都有 log 出來。