Event Capture, Propagation, Bubbling and Once

探討冒泡事件

Bubbling 冒泡

當一個點擊事件觸發時，會往上層並觸發觸發所有父層的event

function logText(e) {
    console.log(this.classList.value); 
}
divs.forEach((div) =>
    div.addEventListener("click", logText, {
        capture: false,
    })
);

 // three、two、one

可以在addEventlistener第三個參數添加{capture:true}，讓事件改為由外而內觸發，預設是false是從內而外產生冒泡事件

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

// one、two、three

也可以透過e.stopPropagation();去停止冒泡事件的發生，讓冒泡只停留在第一層

function logText(e) {
    console.log(this.classList.value); // one
    e.stopPropagation();
}

透過once讓按鈕只觸發一次，原理是這樣的，當button的click event 觸發時，結束動作後，button會透過button.removeEventListener移除監聽器

button.addEventListener(
    "click",
    (e) => {
        console.log("clicked");
    },
    {
        once: true,
    }
);