Event Capture, Propagation, Bubbling and Once


Posted by wayne201299 on 2023-10-04

探討冒泡事件

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,
    }
);

#javascript #html







Related Posts

NLP Data Augmentation 常見方法

NLP Data Augmentation 常見方法

Sass 實戰

Sass 實戰

npm 無法安裝 craco

npm 無法安裝 craco


Comments