Event Propagation

const egg = document.getElementById('egg');
egg.addEventListener('click', (e) => {
  console.log('eat!');
}, true)

The 3rd Argument of Event Listener - useCapture

true - 把這個監聽添加到 Capture Phase
false - 把這個監聽添加到 Bubbling Phase
預設為 false

3 Steps of Event Propagation

// PhaseType
  const unsigned short      CAPTURING_PHASE                = 1;
  const unsigned short      AT_TARGET                      = 2;
  const unsigned short      BUBBLING_PHASE                 = 3;

apple.addEventListener('click', (e) => {
  console.log('apple', e.eventPhase);
}, false)

// apple, 3

apple.addEventListener('click', (e) => {
  console.log('apple', e.eventPhase);
}, true)

// apple, 1

Event.stopPropagation()

終止事件傳遞，所以剩下的 listener 都不會再收到任何事件。這邊指的「事件傳遞被停止」，意思是說不會再把事件傳遞給「下一個節點」，但若是你在同一個節點上有不只一個 listener，還是會被執行到。且對於同一個層級，其他剩下的 listener 還是會被執行到。

Event.stopImmediatePropagation()

讓其他同一層級的 listener 也不要被執行。

實際應用

Delegation

最常見的用法其實就是事件代理（Delegation），例如說你今天有一個 ul，底下 1000 個 li，如果你幫每一個 li 都加上一個 eventListener，你就新建了 1000 個 function。但任何點擊 li 的事件其實都會傳到 ul 身上，因此我們可以在 ul 身上掛一個 listener 就好。而這樣的好處是當你新增或是刪除一個 li 的時候，不用去處理跟那個元素相關的 listener，因為你的 listener 是放在 ul 身上。這樣透過父節點來處理子節點的事件，就叫做事件代理。