梳理下常见的不冒泡事件

2019-04-15 admin

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 事件是冒泡事件

Input 事件

事件触发顺序是 beforeinput,然后是 input,两者都是冒泡事件

Keyboard 事件

首先触发 keydown 事件,然后是 beforeinput、input,最后是 keyup;如果长时间按住不放,那么则是 keydown 事件、beforeinput 事件和 input 事件

Keyboard 全部是冒泡事件

Composition 事件

该事件是复合事件,用来处理输入法编辑器的输入。

该事件包括三个:

  • compositionstart 输入法编辑器打开状态,准备输入
  • compositionupdate 向输入字段插入新字符时触发
  • compositionend 输入法编辑器关闭时触发

⚠️ 需要注意的是,三个事件中只有第一个 compositionstart 事件是 cancelable 的,并且三个事件都是冒泡事件

其他

除此之外,还有监听 Node 节点插入移除事件也是不冒泡事件

  • DOMNodeInsertedIntoDocument 不冒泡 ❌
  • DOMNodeRemovedFromDocument 不冒泡 ❌

另外,html 中表单验证合法性 invalid 事件也是不冒泡的

indexedDB 中的一系列事件也都是不冒泡的,除了 abort 事件

  • abort
  • blocked 不冒泡 ❌
  • close 不冒泡 ❌
  • complete 不冒泡 ❌
  • success 不冒泡 ❌
  • upgradeneeded 不冒泡 ❌
  • versionchange 不冒泡 ❌

html5 的媒体事件 media Event 也都是不冒泡的

html5 的 online offline、notification、push 等事件也都是不冒泡的;针对特定资源的 Progress 事件如 abort、load、progress、timeout 等等都是不冒泡的

针对特定选区的 selection API 的相关事件 selectionchange 是不冒泡的:

  • selectstart
  • selectionchange 不冒泡 ❌

SSE 的相关事件也是不冒泡的

html5 的 drag & drop 或 touch 事件则是冒泡的

JS 菌公众账号

请关注我的订阅号,不定期推送有关 JS 的技术文章,只谈技术不谈八卦 😊

[转载]原文链接:https://segmentfault.com/a/1190000018866046

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-61786.html

文章标题:梳理下常见的不冒泡事件

相关文章
HTML5会是下一个风口吗?
2014年10月底, W3C(万维网联盟)正式宣布HTML5正式定稿,科技圈就像发现了可以打破谷歌、苹果所统领的原生APP世界的方法,发表了很多宣讲HTML5将真正开始颠覆原生(Native)App的文章,也开始着力发展HTML5,开始抢占...
2015-11-12
Bootstrap 下拉多选框插件Bootstrap Multiselect
引入文件: <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"&#x2...
2017-02-22
JS中Select下拉列表类(支持输入模糊查询)功能
下面给大家分享一段代码关于select下拉列表类支持输入模糊查询功能的实现代码,具体代码如下所示: <span style="font-size:14px;"> <HTML> &lt...
2017-03-06
2014年,你是不是被这5个HTML5技术刷屏了?
如今,几乎每天都有HTML5页面的推广以及小游戏、小测试在微信上传播,用户也逐渐习惯被各种HTML5轰炸。那么在刚刚过去的一年究竟有哪些HTML5技术堪称火爆,让人们的微信频频被刷屏呢? 1、2048 2048 在4x4的棋盘上,用方向键选...
2015-11-12
Zepto Ajax 事件
当global: true时。在Ajax请求生命周期内,以下这些事件将被触发。 ajaxStart (global):如果没有其他Ajax请求当前活跃将会被触发。 ajaxBeforeSend (data: xhr, options):再...
2017-04-26
线程有什么用处? 为什么有些东西注定不会流行
多线程的领域也许只有一个: 图形学. 我们以一个游戏来说明 @ |___|___|___|___|___ @是一个玩家, 往前走, 每一个___是1米. 每当@走到1米的时候, 会绘制一个蘑菇*给玩家看. @|___*___|___|___...
2015-11-12
7个你可能不认识的CSS单位
浼楁墍鍛ㄧ煡CSS鎶€鏈�鎴戜滑铏界劧寰堢啛鎮夛紝鍦ㄤ娇鐢ㄧ殑杩囩▼鍗村緢瀹规槗琚�鍥颁綇锛岃繖璁╂垜浠�鍦ㄦ柊闂�棰樺嚭鐜扮殑鏃跺€欏彉寰楀緢涓嶅埄銆� 闅忕潃web缁х画涓嶆柇鍦板彂灞曪紝瀵逛簬鏂版妧鏈�鏂拌В鍐虫柟妗堢殑瑕佹眰涔熶細涓...
2015-11-11
HTML5:未来不可阻挡的力量
HTML5像是互联网行业扔下的一颗炸弹,有些人还未反应过来,原先专注的领域也许就将面临彻底的革新。比如像前几年疯狂甚至有点野蛮成长的App。虽然HTML5从出现到去年标准尘埃落定,一直在争议中曲折发展,但是各种H5页面的推广以及H5小游戏在...
2015-11-12
mpvue 小程序如何开启下拉刷新,上拉加载?
https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#onpulldownrefresh 小程序API 微信小程序之下拉加载和上拉刷新 微信小程序下拉加载和上拉...
2018-05-25
回到顶部