梳理下常见的不冒泡事件

梳理下常见的不冒泡事件

UI 事件

•load 异步 不冒泡 ❌•unload 不冒泡 ❌•abort 不冒泡 ❌•error 异步 不冒泡 ❌•select

load、unload 这些资源加载的事件不冒牌也是容易理解?

Focus 事件

事件触发顺序见下表：

•blur 不冒泡 ❌•focus 不冒泡 ❌•focusin•focusout

要注意 blur 事件和 focus 事件都是不冒泡的，因获取和失去焦点本身就是针对这个元素的。如果要坚挺具体的焦点变化情况，那么应该使用 focusin 和 focusout

Mouse 事件

如果元素内部没有嵌套另一个元素，事件触发的顺序见下表：

如果元素A内部嵌套了元素B，事件触发顺序见下表：

如果是下图所示

直接移动到元素C，常见于失去焦点再获得焦点的情况，事件触发顺序见下表：

可以看到 mouseover/mouseout 事件只触发一次，mouseenter/mouseleave 事件触发了三次

然后再看下 click 元素

|Event Type|Notes| |--|--|--| |mousedown| |mousemove|OPTIONAL, multiple events, some limits| |mouseup| |click| |mousemove|OPTIONAL, multiple events, some limits| |mousedown| |mousemove|OPTIONAL, multiple events, some limits| |mouseup| |click| |dblclick|

Mouse 事件中有两个不冒泡事件：

•click•dblclick•mousedown•mouseenter 不冒泡 ❌•mouseleave 不冒泡 ❌•mousemove•mouseout•mouseover•mouseup

mouseenter/mouseleave 看这个单词也是跟 focusin/focusout 一样专注于变化，因此这两个不冒泡的事件和 focus 事件作对比也容易理解 ?

Wheel 事件

wheel 事件是冒泡事件

•wheel 异步

Input 事件

事件触发顺序是 beforeinput，然后是 input，两者都是冒泡事件

•beforeinput•input

Keyboard 事件

首先触发 keydown 事件，然后是 beforeinput、input，最后是 keyup；如果长时间按住不放，那么则是 keydown 事件、beforeinput 事件和 input 事件

Keyboard 全部是冒泡事件

•keydown•keyup

Composition 事件

该事件是复合事件，用来处理输入法编辑器的输入。

该事件包括三个：

•compositionstart 输入法编辑器打开状态，准备输入•compositionupdate 向输入字段插入新字符时触发•compositionend 输入法编辑器关闭时触发

⚠️ 需要注意的是，三个事件中只有第一个 compositionstart 事件是 cancelable 的，并且三个事件都是冒泡事件

其他

除此之外，还有监听 Node 节点插入移除事件也是不冒泡事件

•DOMNodeInsertedIntoDocument 不冒泡 ❌•DOMNodeRemovedFromDocument 不冒泡 ❌

另外，html 中表单验证合法性 invalid 事件也是不冒泡的

•invalid 不冒泡 ❌

indexedDB 中的一系列事件也都是不冒泡的，除了 abort 事件

•abort•blocked 不冒泡 ❌•close 不冒泡 ❌•complete 不冒泡 ❌•success 不冒泡 ❌•upgradeneeded 不冒泡 ❌•versionchange 不冒泡 ❌

html5 的媒体事件 media Event 也都是不冒泡的

•play 不冒泡 ❌•mute 不冒泡 ❌•等等

html5 的 online offline、notification、push 等事件也都是不冒泡的；针对特定资源的 Progress 事件如 abort、load、progress、timeout 等等都是不冒泡的

针对特定选区的 selection API 的相关事件 selectionchange 是不冒泡的：

•selectstart•selectionchange 不冒泡 ❌

SSE 的相关事件也是不冒泡的

html5 的 drag & drop 或 touch 事件则是冒泡的