js中不会冒泡的事件有哪些？

不会冒泡的事件有哪些？

核心规则：大多数原生DOM事件会冒泡，但凡标记了bubbles：false的就不会。

一、最常被踩坑的几个

1.focus/blur-不冒泡

复制代码

// ❌ blur/focus 不冒泡，这样可能收不到
parent.addEventListener('blur', handler);

// ✅ 方案A：用冒泡版（部分浏览器支持）
parent.addEventListener('focusin', handler);
parent.addEventListener('focusout', handler);

// ✅ 方案B：捕获阶段监听（最通用、最可靠）
parent.addEventListener('focus', handler, true);
parent.addEventListener('blur',  handler, true);

2.mouseenter/mouseleave-刻意不冒泡

这就是它们存在的原因-跟mouseover/mouseout做区分：

|-----------------------|-----|----------------------|
| 事件 | 冒泡 | 穿过子元素时会重复触发？ |
| mouseover/mouseout | 冒泡 | 会（因为子元素边界也算） |
| mouseenter/mouseleave | 不冒泡 | 不会（只在进出"当前元素整体"时各一次） |

复制代码

el.addEventListener('mouseenter', () => console.log('enter')); // OK
// 挂到父元素上等它冒泡上来 → 永远不会触发

3.scroll-不冒泡

复制代码

// ❌ 这样通常没用（scroll 不冒泡）
parent.addEventListener('scroll', handler);

// ✅ 捕获阶段才能拦到子元素的 scroll
parent.addEventListener('scroll', handler, { capture: true });

二、完整归类清单

焦点类（Focus Events）

|----------|-----|--------------------|
| 事件 | 冒泡？ | 备注 |
| focus | 不冒泡 | |
| blur | 不冒泡 | |
| focusin | 冒泡 | IE起源，规范仍保留但部分环境有差异 |
| focusout | 冒泡 | 同上 |

鼠标指针进入/离开类

|--------------|-----|
| 事件 | 冒泡？ |
| mouseenter | × |
| mouseleave | × |
| pointerenter | × |
| pointerleave | × |

资源加载/页面生命周期类

这些事件的触发源本身就不在常规"冒泡链"里：

|-----------------------------|-----|------------------|
| 事件 | 冒泡？ | 触发对象 |
| load（img/iframe/script等元素级） | × | 特定元素 |
| error（资源加载失败） | × | img/script/link等 |
| unload | × | window |
| beforeunload | × | window |
| readystatechange | × | document/xhr |

滚动/尺寸类

|--------|------------------|
| 事件 | 冒泡？ |
| scroll | ×（bubbles：false） |
| resize | N/A（只存在于window） |

表单验证类

|---------|------|
| 事件 | 冒泡？ |
| invalid | ×不冒泡 |

复制代码

// invalid 不会冒泡到 form 上通过冒泡捕获
form.addEventListener('invalid', handler);        // ❌ 大概率漏掉
form.addEventListener('invalid', handler, true);   // ✅ 捕获阶段

三、怎么自己验证？

任何事件都可以秒查：

复制代码

const e = new MouseEvent('click');
console.log(e.bubbles); // true

const f = new FocusEvent('focus');
console.log(f.bubbles); // false

// 对已有事件类型查原形
console.log(Event.prototype.__proto__.constructor === UIEvent); // 辅助判断类型

// 更直接：查 MDN 或规范，或者：
document.createElement('div').onfocus; // 看看它是什么事件

或直接在控制台看规范属性：

复制代码

// 创建一个真实 event 看它的 bubbles/composed
const evt = new Event('yourEventType', { bubbles: true });
// 但注意：内置事件要这样看：
const scrollEvt = new UIEvent('scroll');
Object.getOwnPropertyNames(scrollEvt);

"状态通知型"事件多半不冒泡，"交互动作型"事件多半冒泡。

焦点是状态 → focus/blur不冒泡
进出一个区域是边界语义 → mouseenter/mouseleave不冒泡
滚动是元素自身状态变化 → scroll不冒泡
点击是明确的用户动作 → click冒泡 ✅