實際應用

知道了事件的傳遞機制、取消傳遞事件跟取消預設行為之後，在實際開發上有什麼用處呢？

最常見的用法其實就是事件代理（Delegation）。

欸等等幫我拿餐點：event delegation 事件代理

若今天要動態新增元素每一個元素都要有一個「事件監聽」的機制，這樣的話，效率非常低，所以我們可以使用「事件代理」。

實作事件代理，利用 div 包住所有 button，將 eventListener 掛在 div 上，藉以達到事件冒泡，讓 button 也會掛有 div 設定的 eventListener 事件監聽。

這樣透過父節點來處理子節點的事件，就叫做事件代理。

範例：動態新增 button 按照順序取名，且每一個 button 上要有

1. class :btn
2. attribute: data-value:num
3. innerText: num

範例程式碼：

HTML:

<div class='outer'>
      <button class="btn-add">add</button>
      <button class="btn" data-value='1'>1</button>
      <button class="btn" data-value='2'>2</button>
</div>

CSS:

.btn {
    padding: 2px 10px;
    margin: 3px;
}

JS:

document.addEventListener('DOMContentLoaded',function(){
  let num = 3;

  document.querySelector('.btn-add').addEventListener('click',
    function() {
      const newButton = document.createElement('button')
      newButton.classList.add('btn')
      newButton.setAttribute('data-value',num)
      newButton.innerText = num
      document.querySelector('.outer').appendChild(newButton)
      num++
    })
 
  document.querySelector('.outer').addEventListener('click', 
    function(e) {
      if(e.target.classList.contains('btn')){
        console.log(e.target.getAttribute('data-value'))
      }
    })   
})

總結

DOM 的捕獲與冒泡機制主要是讓你透過父元素掛「事件處理機制」，然後透過事件代理可以讓子元素有待有父元素的「事件處理機制」。

若想取消事件代理的機制，也可以用 stopPropagation()去實作。

參考資料：

1. DOM & BOM
2. Huli DOM 的事件傳遞機制：捕獲與冒泡