⭐️ more front-end technology and knowledge, search subscription number JS bacteria subscription
Comb through common non-bubbling events
UI events
- Load Asynchronous non-bubbling ❌
- Unload Does not bubble ❌
- Abort does not bubble ❌
- Error Async does not bubble ❌
- select
Load, unload events loaded by these resources are also easy to understand 🤐
Focus event
The sequence of events is shown in the following table:
| Event Type | Notes |
|---|---|
| User shifts focus | |
| focusin | Fires before the first target element gets focus |
| focus | Fires when the first target element gets focus |
| User shifts focus | |
| focusout | Fires before the first target element loses focus |
| focusin | Fires before the second target element gets focus |
| blur | Triggered when the first target element loses focus |
| focus | Fires when the second element gets focus |
- Blur does not bubble ❌
- Focus don’t bubble ❌
- focusin
- focusout
Note that blur events and focus events are non-bubbling, as the capture and loss of focus are themselves specific to this element. To firm up specific focus changes, use FocusIn and FocusOut
The Mouse events
If there is no other element nested inside the element, the order in which the events fire is shown in the table below:
| Event Type | Element | Notes |
|---|---|---|
| mousemove | ||
| Let’s go to element A | ||
| mouseover | A | |
| mouseenter | A | |
| mousemove | A | Multiple mousemove events |
| Remove the element A | ||
| mouseout | A | |
| mouseleave | A |
If element A has element B nested inside, the sequence of events is shown in the following table:
| Event Type | Element | Notes |
|---|---|---|
| mousemove | ||
| Let’s go to element A | ||
| mouseover | A | |
| mouseenter | A | |
| mousemove | A | Multiple mousemove events |
| Move to the embedded element B | ||
| mouseout | A | |
| mouseover | B | |
| mouseenter | B | |
| mousemove | B | Multiple mousemove events |
| Move back to A | ||
| mouseout | B | |
| mouseleave | B | |
| mouseover | A | |
| mousemove | A | Multiple mousemove events |
| Remove the element A | ||
| mouseout | A | |
| mouseleave | A |
If it is as shown below
Moving directly to element C is common in losing focus and then gaining focus. The sequence of events is shown in the following table:
| Event Type | Element | Notes |
|---|---|---|
| mousemove | ||
| Let’s go straight to element C | ||
| mouseover | C | |
| mouseenter | A | |
| mouseenter | B | |
| mouseenter | C | |
| mousemove | C | Multiple mousemove events |
| Remove element C directly… | ||
| mouseout | C | |
| mouseleave | C | |
| mouseleave | B | |
| mouseleave | A |
You can see that the mouseover/ Mouseout event fires only once and the MouseEnter/Mouseleave event fires three times
Then take a look at the click element
| 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 |
The Mouse event has two non-bubbling events:
- click
- dblclick
- mousedown
- Mouseenter does not bubble ❌
- Mouseleave does not bubble ❌
- mousemove
- mouseout
- mouseover
- mouseup
Mouseenter /mouseleave look at this word as focusin/focusout, so it’s easy to compare these two non-bubbled events to focus events 🌞
Wheel events
The wheel event is a bubbling event
- Wheel asynchronous
The Input event
The event firing sequence is beforeInput followed by Input, both of which are bubbling events
- beforeinput
- input
The rid_device_info_keyboard event
The keyDown event is triggered first, followed by beforeInput, Input, and keyUp. Keydown events, beforeInput events, and Input events if held for a long time
Keyboard Indicates all bubbling events
- keydown
- keyup
Composition event
This event is a compound event used to process input to the input method editor.
The event consists of three:
- Compositionstart Indicates that the input method editor is open and ready for input
- Fired when compositionUpdate inserts a new character into an input field
- Compositionend Triggered when the input method editor is closed
⚠️ Note that only the first compositionStart event is cancelable, and all three are bubbling events
other
In addition, there are listener Node insertion and removal events are also non-bubbling events
- Not bubble ❌ DOMNodeInsertedIntoDocument
- Not bubble ❌ DOMNodeRemovedFromDocument
In addition, invalid events are not bubbling in HTML for form validation
- Invalid does not bubble ❌
The set of events in indexedDB are also non-bubbling, except for abort events
- abort
- Blocked does not bubble ❌
- Close does not bubble ❌
- Complete does not bubble ❌
- Success does not bubble ❌
- Upgradenneeded does not bubble ❌
- Versionchange does not bubble ❌
Html5 media events are also non-bubbling
- Play does not bubble ❌
- Mute do not bubble ❌
- , etc.
Html5’s online Offline, Notification, push and other events are also non-bubbling; Progress events for specific resources such as abort, load, Progress, timeout, and so on are non-bubbling
The related event selectionChange for the Selection API for a particular selection is non-bubbling-like:
- selectstart
- Selectionchange does not bubble ❌
SSE related events are also non-bubbling
Html5’s Drag & Drop or Touch events are bubbling
Please pay attention to my subscription number, push technical articles about JS irregularly, only talk about technology not gossip 😊