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

不会冒泡的事件有哪些核心规则大多数原生DOM事件会冒泡但凡标记了bubblesfalse的就不会。一、最常被踩坑的几个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×资源加载/页面生命周期类这些事件的触发源本身就不在常规“冒泡链”里事件冒泡触发对象loadimg/iframe/script等元素级×特定元素error资源加载失败×img/script/link等unload×windowbeforeunload×windowreadystatechange×document/xhr滚动/尺寸类事件冒泡scroll×bubblesfalseresizeN/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冒泡 ✅