•load 异步 不冒泡 ❌•unload 不冒泡 ❌•abort 不冒泡 ❌•error 异步 不冒泡 ❌•select
load、unload 这些资源加载的事件不冒牌也是容易理解?
事件触发顺序见下表:
Event Type | Notes |
---|---|
User shifts focus | |
focusin | 第一个目标元素获得焦点之前触发 |
focus | 第一个目标元素获得焦点之后触发 |
User shifts focus | |
focusout | 第一个目标元素失去焦点之前触发 |
focusin | 第二个目标元素获得焦点之前触发 |
blur | 第一个目标元素失去焦点之后触发 |
focus | 第二个元素获得焦点之后触发 |
•blur 不冒泡 ❌•focus 不冒泡 ❌•focusin•focusout
要注意 blur 事件和 focus 事件都是不冒泡的,因获取和失去焦点本身就是针对这个元素的。如果要坚挺具体的焦点变化情况,那么应该使用 focusin 和 focusout
如果元素内部没有嵌套另一个元素,事件触发的顺序见下表:
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 异步
事件触发顺序是 beforeinput,然后是 input,两者都是冒泡事件
•beforeinput•input
首先触发 keydown 事件,然后是 beforeinput、input,最后是 keyup;如果长时间按住不放,那么则是 keydown 事件、beforeinput 事件和 input 事件
Keyboard 全部是冒泡事件
•keydown•keyup
该事件是复合事件,用来处理输入法编辑器的输入。
该事件包括三个:
•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 事件则是冒泡的