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