⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌 订阅梳理下常见的不冒泡事件UI 事件load 异步 不冒泡 ❌unload 不冒泡 ❌abort 不冒泡 ❌error 异步 不冒泡 ❌selectload、unload 这些资源加载的事件不冒牌也是容易理解????Focus 事件事件触发顺序见下表：Event TypeNotesUser shifts focusfocusin第一个目标元素获得焦点之前触发focus第一个目标元素获得焦点之后触发User shifts focusfocusout第一个目标元素失去焦点之前触发focusin第二个目标元素获得焦点之前触发blur第一个目标元素失去焦点之后触发focus第二个元素获得焦点之后触发blur 不冒泡 ❌focus 不冒泡 ❌focusinfocusout要注意 blur 事件和 focus 事件都是不冒泡的，因获取和失去焦点本身就是针对这个元素的。如果要坚挺具体的焦点变化情况，那么应该使用 focusin 和 focusoutMouse 事件如果元素内部没有嵌套另一个元素，事件触发的顺序见下表：Event TypeElementNotesmousemove 移动到元素AmouseoverAmouseenterAmousemoveAMultiple mousemove events 移出元素AmouseoutAmouseleaveA如果元素A内部嵌套了元素B，事件触发顺序见下表：Event TypeElementNotesmousemove 移动到元素AmouseoverAmouseenterAmousemoveAMultiple mousemove events 移动到内嵌元素BmouseoutAmouseoverBmouseenterBmousemoveBMultiple mousemove events 重新移动到AmouseoutBmouseleaveBmouseoverAmousemoveAMultiple mousemove events 移出元素AmouseoutAmouseleaveA如果是下图所示直接移动到元素C，常见于失去焦点再获得焦点的情况，事件触发顺序见下表：Event TypeElementNotesmousemove 直接移动到元素CmouseoverCmouseenterAmouseenterBmouseenterCmousemoveCMultiple mousemove events 直接移出元素 C…mouseoutCmouseleaveCmouseleaveBmouseleaveA可以看到 mouseover/mouseout 事件只触发一次，mouseenter/mouseleave 事件触发了三次然后再看下 click 元素Event TypeNotesmousedownmousemoveOPTIONAL, multiple events, some limitsmouseupclickmousemoveOPTIONAL, multiple events, some limitsmousedownmousemoveOPTIONAL, multiple events, some limitsmouseupclickdblclickMouse 事件中有两个不冒泡事件：clickdblclickmousedownmouseenter 不冒泡 ❌mouseleave 不冒泡 ❌mousemovemouseoutmouseovermouseupmouseenter/mouseleave 看这个单词也是跟 focusin/focusout 一样专注于变化，因此这两个不冒泡的事件和 focus 事件作对比也容易理解 ????Wheel 事件wheel 事件是冒泡事件wheel 异步Input 事件事件触发顺序是 beforeinput，然后是 input，两者都是冒泡事件beforeinputinputKeyboard 事件首先触发 keydown 事件，然后是 beforeinput、input，最后是 keyup；如果长时间按住不放，那么则是 keydown 事件、beforeinput 事件和 input 事件Keyboard 全部是冒泡事件keydownkeyupComposition 事件该事件是复合事件，用来处理输入法编辑器的输入。该事件包括三个：compositionstart 输入法编辑器打开状态，准备输入compositionupdate 向输入字段插入新字符时触发compositionend 输入法编辑器关闭时触发⚠️ 需要注意的是，三个事件中只有第一个 compositionstart 事件是 cancelable 的，并且三个事件都是冒泡事件其他除此之外，还有监听 Node 节点插入移除事件也是不冒泡事件DOMNodeInsertedIntoDocument 不冒泡 ❌DOMNodeRemovedFromDocument 不冒泡 ❌另外，html 中表单验证合法性 invalid 事件也是不冒泡的invalid 不冒泡 ❌indexedDB 中的一系列事件也都是不冒泡的，除了 abort 事件abortblocked 不冒泡 ❌close 不冒泡 ❌complete 不冒泡 ❌success 不冒泡 ❌upgradeneeded 不冒泡 ❌versionchange 不冒泡 ❌html5 的媒体事件 media Event 也都是不冒泡的play 不冒泡 ❌mute 不冒泡 ❌等等html5 的 online offline、notification、push 等事件也都是不冒泡的；针对特定资源的 Progress 事件如 abort、load、progress、timeout 等等都是不冒泡的针对特定选区的 selection API 的相关事件 selectionchange 是不冒泡的：selectstartselectionchange 不冒泡 ❌SSE 的相关事件也是不冒泡的html5 的 drag & drop 或 touch 事件则是冒泡的请关注我的订阅号，不定期推送有关 JS 的技术文章，只谈技术不谈八卦 ????