在 JavaScript 中,事件處理程序的執(zhí)行順序取決于事件捕獲和事件冒泡。事件捕獲是從根節(jié)點開始,逐級向下傳遞事件,直到到達目標元素。事件冒泡則是從事件目標開始,向上回溯至根節(jié)點。
以下是如何在 JavaScript 中實現(xiàn)事件冒泡和捕獲的示例:
useCapture
參數(shù):element.addEventListener('click', function(event) {
console.log('捕獲階段');
}, true); // useCapture 設置為 true 表示在捕獲階段執(zhí)行
element.addEventListener('click', function(event) {
console.log('冒泡階段');
}, false); // useCapture 設置為 false 表示在冒泡階段執(zhí)行
<div id="parent">
父元素
<button id="child">子元素</button>
</div>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function(event) {
console.log('父元素捕獲階段');
});
child.addEventListener('click', function(event) {
console.log('子元素捕獲階段');
});
parent.addEventListener('click', function(event) {
console.log('父元素冒泡階段');
});
child.addEventListener('click', function(event) {
console.log('子元素冒泡階段');
});
當點擊子元素時,事件處理程序?qū)凑找韵马樞驁?zhí)行:
通過調(diào)整 useCapture
參數(shù)的值,您可以在事件捕獲或事件冒泡階段執(zhí)行自定義的處理程序。