window.addEventListener()方法的第三個(gè)參數(shù)

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或者省略不寫。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 5個(gè)文學(xué)賽事,最高獎(jiǎng)勵(lì)20萬(wàn),符合要求的作者抓緊時(shí)間參加! 三月至,春回大地,作者老師們的創(chuàng)作靈感是不是也源源不斷...
    高級(jí)編輯李編hwslbj閱讀 334評(píng)論 0 0
  • 美好的一天從早報(bào)開始呀 3月2日?qǐng)?bào),星期四,農(nóng)歷二月十一,早安[玫瑰][玫瑰][玫瑰] 1. 第三次延期!財(cái)政部:...
    君君小末閱讀 116評(píng)論 0 4
  • 我已如愿搬走了。 今天是3月1號(hào),是我“背叛”原生家庭離開的第一天。 今早我睡得很死 根本沒有聽到什么鬧鐘聲響。也...
    千雨小花閱讀 83評(píng)論 0 2
  • 1,打卡群又有伙伴加入。2,昨晚9點(diǎn)多就睡著了。3,捐了一次款。4,反思自己的情緒。5,控制飲食。 1,我十分感謝...
    簡(jiǎn)書鑫閱讀 124評(píng)論 0 1
  • 1.能一分鐘完成的事情就對(duì)不要拖延:如找同事溝通一件事、打一個(gè)電話、發(fā)一個(gè)信息等,一分鐘能完成就不要拖延。 2.寫...
    可可西麗的奧利奧閱讀 65評(píng)論 0 0

友情鏈接更多精彩內(nèi)容