JS30紀錄 25-Event Capture, Propagation, Bubbling and Once

事件捕捉，冒泡事件的觀察與選擇參數的運用，先捕獲，再冒泡觀察，搭配 Console 觀看

Demo | Github

處理步驟

首先觀察冒泡事件的觸發順序，變更為捕獲，觀察傳遞順序，最後使用 once 來觀察

步驟 1.

建立三組 Div ，以及 click 觸發，觀察觸發順序

const divs = document.querySelectorAll("div");

/**
 * 顯示目前觸發的 DOM 
 * 
 * @param {any} e 
 */
function logText(e) {
  console.log(this.classList.value);
}

divs.forEach(div => div.addEventListener("click", logText));

其結果會是 three > two > one

步驟 2.

變更為捕獲

const divs = document.querySelectorAll("div");

/**
 * 顯示目前觸發的 DOM 
 * 
 * @param {any} e 
 */
function logText(e) {
  console.log(this.classList.value);
}

// 變更為捕獲
divs.forEach(div => div.addEventListener("click", logText,{
    capture: true
}));

觸發順序變成 one > two > three

步驟 3.

其後增加使用 once 參數，此參數將使觸發進行一次

筆記與備註事項

JavaScript 部分

EventTarget.addEventListener()

EventTarget.addEventListener() 方法能將指定的事件監聽器註冊到 EventTarget 實作物件上。EventTarget 可能是 Document 中的 Element 物件、Document 物件本身、Window 物件，或是其它支援事件的物件（如：XMLHttpRequest）。
資料來源 - MDN

參考資料

• JavaScript 30 day
• 作者 Github Wes Bos
• Js 30 day 中文指南
• 瓜瓜的 JS 30
• 我的 JS 30 練習Github
• DOM 的事件傳遞機制：捕獲與冒泡