事件冒泡是當事件觸發后,從事件源(觸發元素)開始,逐級向上傳遞到根節點(通常是document
對象)。在處理事件冒泡時,你可以使用event.stopPropagation()
方法來阻止事件繼續向上冒泡。
以下是一個簡單的示例,說明如何處理事件冒泡:
HTML:
<div id="parent">
<button id="child">點擊我</button>
</div>
JavaScript:
// 獲取元素
const parent = document.getElementById('parent');
const child = document.getElementById('child');
// 為父元素添加事件監聽器
parent.addEventListener('click', (event) => {
console.log('父元素被點擊');
});
// 為子元素添加事件監聽器
child.addEventListener('click', (event) => {
console.log('子元素被點擊');
// 阻止事件冒泡
event.stopPropagation();
});
在這個示例中,當你點擊子元素(按鈕)時,只會觸發子元素的事件監聽器,輸出"子元素被點擊"。由于我們在子元素的事件監聽器中調用了event.stopPropagation()
,事件不會繼續向上冒泡,因此父元素的事件監聽器不會被觸發,輸出"父元素被點擊"不會出現。