梳理下常見的不冒泡事件

JS菌發表於2019-04-14
事件

20190414154908.png

⭐️ 更多前端技術和知識點，搜尋訂閱號 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

如果是下圖所示

20190414131151.png

直接移動到元素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

20190414131545.png

可以看到 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 菌公眾賬號

請關注我的訂閱號，不定期推送有關 JS 的技術文章，只談技術不談八卦 ?

相關文章