在前端開發(fā)中，DOM事件流（捕獲階段→目標(biāo)階段→冒泡階段）是核心基礎(chǔ)之一。我們熟知的click、keydown、mouseover等事件，都會(huì)在觸發(fā)后從目標(biāo)元素向上冒泡至父元素、document甚至window，這也是事件委托的核心原理。

但并非所有事件都遵循這一規(guī)則——有些事件僅在觸發(fā)的目標(biāo)元素上生效，不會(huì)向上傳播，也就是所謂的**“不冒泡的事件”**。本文將系統(tǒng)梳理這類事件，解析其特性與應(yīng)用場景，幫你避開開發(fā)中的常見坑。

一、為什么有些事件不冒泡？

事件是否冒泡，本質(zhì)是由其設(shè)計(jì)初衷決定的：

• 冒泡事件的核心是“通用交互”（如點(diǎn)擊、鼠標(biāo)移動(dòng)），允許父元素統(tǒng)一處理子元素的同類事件，便于實(shí)現(xiàn)事件委托；
• 不冒泡事件多與“元素專屬狀態(tài)/資源加載”相關(guān)（如焦點(diǎn)、資源加載），這類事件的影響范圍僅局限于目標(biāo)元素本身，向上傳播無實(shí)際意義。

例如focus（獲取焦點(diǎn)）事件，僅對輸入框、按鈕等可交互元素有意義。若允許冒泡，父元素會(huì)無差別接收到所有子元素的焦點(diǎn)變化，反而增加不必要的性能開銷和邏輯混亂。

二、常見的不冒泡事件及解析

1. focus / blur：焦點(diǎn)相關(guān)事件（核心不冒泡事件）

• focus：元素獲得焦點(diǎn)時(shí)觸發(fā)（如點(diǎn)擊輸入框、按Tab鍵切換焦點(diǎn)）；
• blur：元素失去焦點(diǎn)時(shí)觸發(fā)（如點(diǎn)擊輸入框外區(qū)域、切換到其他元素）。

這兩個(gè)是最典型的不冒泡事件，也是前端開發(fā)中最常接觸的“非冒泡事件”。

開發(fā)提醒：若想監(jiān)聽子元素的焦點(diǎn)變化，不能依賴focus/blur的冒泡，可使用其“冒泡版替代事件”——focusin（對應(yīng)focus）和focusout（對應(yīng)blur），這兩個(gè)事件會(huì)正常冒泡，是focus/blur的官方替代方案。

示例代碼：

// ? 錯(cuò)誤：父元素?zé)o法捕獲子元素的focus事件（不冒泡）
document.querySelector('.parent').addEventListener('focus', () => {
  console.log('父元素捕獲focus'); // 不會(huì)執(zhí)行
});
?
// ? 正確：用focusin監(jiān)聽（冒泡）
document.querySelector('.parent').addEventListener('focusin', () => {
  console.log('子元素獲取焦點(diǎn)'); // 正常執(zhí)行
});

2. load / unload：資源加載相關(guān)事件

• load：資源加載完成時(shí)觸發(fā)，常見于img、script、audio、video等元素，僅在目標(biāo)元素上觸發(fā)，不會(huì)冒泡；

• unload：頁面/資源即將被卸載時(shí)觸發(fā)（如關(guān)閉標(biāo)簽頁、導(dǎo)航到其他頁面），僅綁定在window或目標(biāo)元素上生效，無冒泡行為。

注意：window.onload是頁面所有資源加載完成的事件，雖綁定在window上，但本質(zhì)也不屬于“冒泡事件”——它是全局事件，沒有傳播對象。

示例代碼：

// img加載完成事件（僅在img本身觸發(fā)）
const img = document.querySelector('img');
img.addEventListener('load', () => {
  console.log('圖片加載完成'); // 正常執(zhí)行
});
?
// ? 父元素?zé)o法捕獲img的load事件（不冒泡）
document.body.addEventListener('load', () => {
  console.log('捕獲圖片load'); // 不會(huì)執(zhí)行
});

3. stop：媒體播放相關(guān)事件

stop事件僅在audio/video等媒體元素上觸發(fā)，當(dāng)媒體播放被主動(dòng)停止時(shí)生效。該事件僅作用于觸發(fā)的媒體元素，無冒泡行為。例如點(diǎn)擊視頻的“停止”按鈕，僅該視頻元素觸發(fā)stop，其父容器不會(huì)接收到該事件。

4. readystatechange：文檔狀態(tài)變化事件

該事件在document.readyState改變時(shí)觸發(fā)（如從"loading"到"interactive"再到"complete"），僅綁定在document或XMLHttpRequest等對象上生效，不會(huì)向父元素傳播。常用于監(jiān)聽頁面DOM加載完成（作為DOMContentLoaded的補(bǔ)充方案）。

5. scroll：特殊的“條件冒泡”事件

scroll事件是特例：標(biāo)準(zhǔn)規(guī)范中scroll不冒泡，但部分瀏覽器（如Chrome）對其做了“冒泡兼容”——元素的scroll事件不會(huì)冒泡，而window的scroll事件是全局事件。

開發(fā)建議：若想監(jiān)聽滾動(dòng)，建議直接綁定到滾動(dòng)元素本身，而非依賴父元素捕獲。

三、如何處理不冒泡事件？

面對不冒泡事件，核心解決思路有三個(gè)：

1. 直接綁定到目標(biāo)元素

針對focus/blur/load等事件，直接在觸發(fā)的元素上綁定監(jiān)聽函數(shù)，是最直接、最可靠的方式。

2. 使用冒泡版替代事件

如focusin替代focus、focusout替代blur，利用冒泡特性實(shí)現(xiàn)父元素統(tǒng)一監(jiān)聽。

3. 利用事件捕獲階段處理

所有事件（包括不冒泡事件）都會(huì)經(jīng)過**“捕獲階段”**，可在捕獲階段監(jiān)聽不冒泡事件：

// 捕獲階段監(jiān)聽focus事件（即使不冒泡，也能被父元素捕獲）
document.querySelector('.parent').addEventListener('focus', () => {
  console.log('捕獲階段捕獲focus'); // 正常執(zhí)行
}, true); // 第三個(gè)參數(shù)為true，代表在捕獲階段觸發(fā)

四、總結(jié)

不冒泡事件是DOM事件體系的重要組成部分，其設(shè)計(jì)符合**“事件影響范圍最小化”**的原則。核心要點(diǎn)可總結(jié)如下：

掌握這些特性，能幫你在事件委托、資源監(jiān)聽、焦點(diǎn)管理等場景中避開陷阱，寫出更健壯的前端代碼。

到此這篇關(guān)于JavaScript中不冒泡的DOM事件的使用小結(jié)的文章就介紹到這了,更多相關(guān)JavaScript不冒泡DOM內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論