在 JavaScript 中,事件冒泡和捕獲是事件傳播的兩種機(jī)制。要控制這兩種機(jī)制,你可以使用以下方法:
使用 addEventListener
方法的第三個(gè)參數(shù):
當(dāng)使用 addEventListener
方法為元素添加事件監(jiān)聽器時(shí),可以傳遞一個(gè)可選的第三個(gè)參數(shù)。這個(gè)參數(shù)決定了事件觸發(fā)時(shí),監(jiān)聽器的執(zhí)行順序。取值如下:
false
(默認(rèn)值):事件觸發(fā)時(shí),監(jiān)聽器按照它們被添加的順序執(zhí)行,即事件冒泡階段先執(zhí)行捕獲階段的監(jiān)聽器,然后執(zhí)行目標(biāo)元素上的監(jiān)聽器,最后執(zhí)行冒泡階段的監(jiān)聽器。true
:事件觸發(fā)時(shí),監(jiān)聽器按照它們被添加的逆序執(zhí)行,即事件冒泡階段先執(zhí)行目標(biāo)元素上的監(jiān)聽器,然后執(zhí)行捕獲階段的監(jiān)聽器,最后執(zhí)行冒泡階段的監(jiān)聽器。示例:
const button = document.querySelector('button');
const parent = button.parentElement;
function bubbleHandler() {
console.log('Bubble handler');
}
function captureHandler() {
console.log('Capture handler');
}
parent.addEventListener('click', bubbleHandler, false); // 事件冒泡階段執(zhí)行
parent.addEventListener('click', captureHandler, true); // 事件捕獲階段執(zhí)行
使用 Event
對象的 stopPropagation
方法:
當(dāng)事件觸發(fā)時(shí),你可以使用 stopPropagation
方法阻止事件繼續(xù)傳播。這樣,事件就不會(huì)觸發(fā)冒泡或捕獲階段的監(jiān)聽器。
示例:
const button = document.querySelector('button');
const parent = button.parentElement;
function bubbleHandler() {
console.log('Bubble handler');
}
function captureHandler() {
console.log('Capture handler');
}
parent.addEventListener('click', bubbleHandler);
parent.addEventListener('click', captureHandler);
button.addEventListener('click', (event) => {
event.stopPropagation(); // 阻止事件冒泡
});
通過合理地設(shè)置第三個(gè)參數(shù)和調(diào)用 stopPropagation
方法,你可以根據(jù)需要控制事件冒泡和捕獲的執(zhí)行順序。