「JavaScript 30」學習筆記（廿五）

前言

本文為「JavaScript 30」教學影片的學習筆記。

目標

理解捕獲傳遞或冒泡傳遞。

筆記

選取 div 元素與按鈕。

const divs = document.querySelectorAll('div');
const button = document.querySelector('button');

---

建立一個 logText() 方法，以輸出元素樣式名稱。

function logText(e) {
    console.log(this.classList.value);
    // e.stopPropagation(); // 阻止當前事件繼續執行捕獲傳遞或冒泡傳遞
}

---

監聽所有 div 元素，當發生 click 事件時，觸發 logText() 方法。

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

• addEventListener 的 capture 參數設為 true 時，會由外向內去執行「捕獲」傳遞；設為 false 時，會由內向外去執行「冒泡」傳遞。
• addEventListener 的once 參數代表這個事件監聽只執行一次。

---

監聽按鈕，當發生 click 事件時，只觸發一次指定的方法。

button.addEventListener('click', () => {
    console.log('Click!!!');
}, {
    once: true
});