在 JavaScript 中,事件冒泡和捕獲是兩種事件傳播的機制。它們決定了事件從哪個元素開始觸發(fā),以及是否繼續(xù)向下傳播。默認(rèn)情況下,事件處理程序首先在內(nèi)部元素上執(zhí)行(捕獲階段),然后在外部元素上執(zhí)行(冒泡階段)。
以下是如何實現(xiàn)事件冒泡和捕獲的示例:
addEventListener
方法設(shè)置事件監(jiān)聽器并指定 useCapture
參數(shù):// 捕獲階段
element.addEventListener('click', function(event) {
console.log('捕獲階段');
}, true);
// 冒泡階段
element.addEventListener('click', function(event) {
console.log('冒泡階段');
}, false);
attachEvent
方法設(shè)置事件監(jiān)聽器(僅適用于 Internet Explorer 瀏覽器):// 捕獲階段
element.attachEvent('onclick', function() {
console.log('捕獲階段');
});
// 冒泡階段
element.attachEvent('onclick', function() {
console.log('冒泡階段');
});
在這兩個示例中,當(dāng)用戶點擊元素時,控制臺將首先輸出 “捕獲階段”,然后輸出 “冒泡階段”。這表明事件首先在內(nèi)部元素上執(zhí)行捕獲階段,然后在外部元素上執(zhí)行冒泡階段。
注意:addEventListener
和 attachEvent
方法的參數(shù)有所不同。addEventListener
的第二個參數(shù)是一個布爾值,用于指定事件處理程序是在捕獲階段還是冒泡階段執(zhí)行。而 attachEvent
的第二個參數(shù)是一個字符串,僅當(dāng)設(shè)置為 'true'
時,事件處理程序才會在捕獲階段執(zhí)行。