我們常常使用.addEventListenr來監聽事件發生
今天就要來好好研究一下他的機制

語法

EventTarget.addEventListener(type, function, capture);

type：要監聽的時間類型，常見的有'click'、'mousedown'、'keypress'...
function：通常是一個function，事件被觸發時，會執行這個function
capture：預設是false，事件觸發的時間點為bubbling phase
如果設定為true，則事件觸發的時間點為capture phase
下圖為過程
capture phase會從root開始往內找，一直到掛監聽tag的父層tag
target phasse就是掛監聽的tag
bubbling會從掛監聽tag的父層tag，往外找直到root

如果要一有事件被觸發就終止capture phase或bubbling phase
則在function中加入e.stopPropagation();
這個常用在父層和子層都有listener的時候
如同之前Day11做影片播放器一樣
就出現過這類問題

const divs = document.querySelectorAll('div');
function printClass(e) {
    console.log(this.classList.value);
    e.stopPropagation();
}
divs.forEach(div => div.addEventListener('click',printClass, true));

當有兩個listener的特性時可以選擇使用物件

divs.forEach(div => div.addEventListener('click',printClass, {
    capture:true,
    once:true
}));

這裡的once的布林值為true時
在被監聽元素觸發事件後
自動移除監聽
效果跟removeEnevtListener差不多

圖片來源
Events-phases