梳理下常見的不冒泡事件

⭐️ 更多前端技術和知識點，搜索訂閱號 JS 菌 訂閱

梳理下常見的不冒泡事件

UI 事件

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

load、unload 這些資源加載的事件不冒牌也是容易理解🤐

Focus 事件

事件觸發順序見下表：

Event Type	Notes
User shifts focus
focusin	第一個目標元素得到焦點以前觸發
focus	第一個目標元素得到焦點以後觸發
User shifts focus
focusout	第一個目標元素失去焦點以前觸發
focusin	第二個目標元素得到焦點以前觸發
blur	第一個目標元素失去焦點以後觸發
focus	第二個元素得到焦點以後觸發

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

要注意 blur 事件和 focus 事件都是不冒泡的，因獲取和失去焦點自己就是針對這個元素的。若是要堅挺具體的焦點變化狀況，那麼應該使用 focusin 和 focusout

Mouse 事件

若是元素內部沒有嵌套另外一個元素，事件觸發的順序見下表：

Event Type	Element	Notes
mousemove
		移動到元素A
mouseover	A
mouseenter	A
mousemove	A	Multiple mousemove events
		移出元素A
mouseout	A
mouseleave	A

若是元素A內部嵌套了元素B，事件觸發順序見下表：

Event Type	Element	Notes
mousemove
		移動到元素A
mouseover	A
mouseenter	A
mousemove	A	Multiple mousemove events
		移動到內嵌元素B
mouseout	A
mouseover	B
mouseenter	B
mousemove	B	Multiple mousemove events
		從新移動到A
mouseout	B
mouseleave	B
mouseover	A
mousemove	A	Multiple mousemove events
		移出元素A
mouseout	A
mouseleave	A

若是是下圖所示

直接移動到元素C，常見於失去焦點再得到焦點的狀況，事件觸發順序見下表：

Event Type	Element	Notes
mousemove
		直接移動到元素C
mouseover	C
mouseenter	A
mouseenter	B
mouseenter	C
mousemove	C	Multiple mousemove events
		直接移出元素 C...
mouseout	C
mouseleave	C
mouseleave	B
mouseleave	A

能夠看到 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 事件則是冒泡的

請關注個人訂閱號，不按期推送有關 JS 的技術文章，只談技術不談八卦 😊