window.addEventListener()方法的第三個(gè)參數(shù)是一個(gè)布爾值,叫做useCapture。
這個(gè)參數(shù)決定了事件是在捕獲階段還是冒泡階段處理。當(dāng)useCapture設(shè)為true時(shí),事件在捕獲階段處理;當(dāng)設(shè)為false時(shí),事件在冒泡階段處理。
捕獲階段是指從根元素到目標(biāo)元素的過程,而冒泡階段則是從目標(biāo)元素再回到根元素的過程。
例如,如果你有一個(gè)嵌套的元素結(jié)構(gòu),像這樣:
<div id="parent">
<button id="child">Click me</button>
</div>
然后你為父元素和子元素都添加了一個(gè)點(diǎn)擊事件監(jiān)聽器:
document.getElementById('parent').addEventListener('click', () => {
console.log('parent clicked');
}, true); // 使用捕獲
document.getElementById('child').addEventListener('click', () => {
console.log('child clicked');
}, false); // 使用冒泡
當(dāng)你點(diǎn)擊按鈕時(shí),如果useCapture設(shè)為true,則會(huì)先打印"parent clicked",然后打印"child clicked"。而如果useCapture設(shè)為false,則會(huì)先打印"child clicked",然后打印"parent clicked"。
通常情況下,我們不需要關(guān)心這個(gè)參數(shù),因?yàn)榇蠖鄶?shù)事件都是在冒泡階段處理的,所以一般會(huì)把這個(gè)參數(shù)設(shè)為false或者省略不寫。