在前端开发中，DOM事件流（捕获阶段→目标阶段→冒泡阶段）是核心基础之一。我们熟知的click、keydown、mouseover等事件，都会在触发后从目标元素向上冒泡至父元素、document甚至window，这也是事件委托的核心原理。
但并非所有事件都遵循这一规则——有些事件仅在触发的目标元素上生效，不会向上传播，也就是所谓的**“不冒泡的事件”**。本文将系统梳理这类事件，解析其特性与应用场景，帮你避开开发中的常见坑。
一、为什么有些事件不冒泡？
事件是否冒泡，本质是由其设计初衷决定的：
-
冒泡事件的核心是“通用交互”（如点击、鼠标移动），允许父元素统一处理子元素的同类事件，便于实现事件委托；
-
不冒泡事件多与“元素专属状态/资源加载”相关（如焦点、资源加载），这类事件的影响范围仅局限于目标元素本身，向上传播无实际意义。
例如focus（获取焦点）事件，仅对输入框、按钮等可交互元素有意义。若允许冒泡，父元素会无差别接收到所有子元素的焦点变化，反而增加不必要的性能开销和逻辑混乱。
二、常见的不冒泡事件及解析
1. focus / blur：焦点相关事件（核心不冒泡事件）
-
focus：元素获得焦点时触发（如点击输入框、按Tab键切换焦点）；
-
blur：元素失去焦点时触发（如点击输入框外区域、切换到其他元素）。
这两个是最典型的不冒泡事件，也是前端开发中最常接触的“非冒泡事件”。
开发提醒：若想监听子元素的焦点变化，不能依赖
focus/blur的冒泡，可使用其“冒泡版替代事件”——focusin（对应focus）和focusout（对应blur），这两个事件会正常冒泡，是focus/blur的官方替代方案。
示例代码：
// ❌ 错误：父元素无法捕获子元素的focus事件（不冒泡）
document.querySelector('.parent').addEventListener('focus', () => {
console.log('父元素捕获focus'); // 不会执行
});
// ✅ 正确：用focusin监听（冒泡）
document.querySelector('.parent').addEventListener('focusin', () => {
console.log('子元素获取焦点'); // 正常执行
});
2. load / unload：资源加载相关事件
-
load：资源加载完成时触发，常见于
img、script、audio、video等元素，仅在目标元素上触发，不会冒泡； -
unload：页面/资源即将被卸载时触发（如关闭标签页、导航到其他页面），仅绑定在
window或目标元素上生效，无冒泡行为。
注意：
window.onload是页面所有资源加载完成的事件，虽绑定在window上，但本质也不属于“冒泡事件”——它是全局事件，没有传播对象。
示例代码：
// img加载完成事件（仅在img本身触发）
const img = document.querySelector('img');
img.addEventListener('load', () => {
console.log('图片加载完成'); // 正常执行
});
// ❌ 父元素无法捕获img的load事件（不冒泡）
document.body.addEventListener('load', () => {
console.log('捕获图片load'); // 不会执行
});
3. stop：媒体播放相关事件
stop事件仅在audio/video等媒体元素上触发，当媒体播放被主动停止时生效。该事件仅作用于触发的媒体元素，无冒泡行为。例如点击视频的“停止”按钮，仅该视频元素触发stop，其父容器不会接收到该事件。
4. readystatechange：文档状态变化事件
该事件在document.readyState改变时触发（如从"loading"到"interactive"再到"complete"），仅绑定在document或XMLHttpRequest等对象上生效，不会向父元素传播。常用于监听页面DOM加载完成（作为DOMContentLoaded的补充方案）。
5. scroll：特殊的“条件冒泡”事件
scroll事件是特例：标准规范中scroll不冒泡，但部分浏览器（如Chrome）对其做了“冒泡兼容”——元素的scroll事件不会冒泡，而window的scroll事件是全局事件。
开发建议：若想监听滚动，建议直接绑定到滚动元素本身，而非依赖父元素捕获。
三、如何处理不冒泡事件？
面对不冒泡事件，核心解决思路有三个：
1. 直接绑定到目标元素
针对focus/blur/load等事件，直接在触发的元素上绑定监听函数，是最直接、最可靠的方式。
2. 使用冒泡版替代事件
如focusin替代focus、focusout替代blur，利用冒泡特性实现父元素统一监听。
3. 利用事件捕获阶段处理
所有事件（包括不冒泡事件）都会经过**“捕获阶段”**，可在捕获阶段监听不冒泡事件：
// 捕获阶段监听focus事件（即使不冒泡，也能被父元素捕获）
document.querySelector('.parent').addEventListener('focus', () => {
console.log('捕获阶段捕获focus'); // 正常执行
}, true); // 第三个参数为true，代表在捕获阶段触发
四、总结
不冒泡事件是DOM事件体系的重要组成部分，其设计符合**“事件影响范围最小化”**的原则。核心要点可总结如下：
掌握这些特性，能帮你在事件委托、资源监听、焦点管理等场景中避开陷阱，写出更健壮的前端代码。
