JavaScript-父子dom同时绑定捕获冒泡点击事件时执行顺序
来源:互联网 发布:怎样创建淘宝号 编辑:程序博客网 时间:2024/06/07 18:03
JavaScript-父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序
事件的执行顺序绝对是让人头疼的问题。当父元素与子元素都绑定了多个事件,且有的绑定在冒泡阶段、有的绑定在捕获阶段时,事件的触发顺序如何?如果你只关心这个问题,请直接下滑到3. 绑定多个事件,且由用户行为触发。如果你想细致了解JavaScript中的事件发生,请慢慢阅读。
1. 原生事件的发生顺序
一般来讲,当为一个a标签添加click事件以后,点击这个标签,会先执行绑定的事件、后跳转页面。一个input绑定blur事件以后,你在input里输入完内容,点击提交按钮,会先发生blur事件,后发生click事件。当然,这是一般来讲。我在一个React项目中曾经发生表单提交时,先发生click事件,blur事件没有来得及发生,造成表单内容没有检验就提交到后台,原因我至今没有找到,解决办法是在click事件上加一个50ms的延迟。
2. 自定义事件
JavaScript中也支持手动触发事件,请看下面代码。
false表示在冒泡阶段调用事件处理程序
true表示在捕获阶段调用时间处理程序
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
JavaScript中自定义事件的类型有(即document.createEvent('HTMLEvents')
中的参数):
1. UIEvents:一般化的UI事件。
2. MouseEvents:一般化的鼠标事件。
3. MutationEvents:一般化的DOM变动事件。
4. HTMLEvents:一般化的HTML事件。
自定义事件的发生比较容易控制,你什么时候触发(dispatchEvent/fireEvent)它,它就什么时候发生。
3. 绑定多个事件,且由用户行为触发
这个情况最复杂,也是标题中的情况:父元素与子元素都绑定多个事件,且有的事件在捕获阶段、有的事件在冒泡阶段。
下面这个例子,父元素div绑定两个事件(一个冒泡阶段、一个捕获阶段),子元素也是这种情况。事件触发顺序如何。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
执行结果:
乍一看这个结果有些乱,但仔细分析可以得出结论:
绑定在被点击元素的事件是按照代码顺序发生,其他元素通过冒泡或者捕获“感知”的事件,按照W3C的标准,先发生捕获事件,后发生冒泡事件。所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件 。
- JavaScript-父子dom同时绑定捕获冒泡点击事件时执行顺序
- JavaScript-父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序
- JavaScript-父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序
- JavaScript中关于事件绑定、冒泡、捕获和执行顺序
- javascript中的事件绑定、事件冒泡、事件捕获和事件执行顺序
- 看懂此文,不再困惑于javascript中的事件绑定、事件冒泡、事件捕获和事件执行顺序
- 看懂此文,不再困惑于javascript中的事件绑定、事件冒泡、事件捕获和事件执行顺序
- 看懂此文,不再困惑于javascript中的事件绑定、事件冒泡、事件捕获和事件执行顺序
- 看懂此文,不再困惑于javascript中的事件绑定、事件冒泡、事件捕获和事件执行顺序
- 看懂此文,不再困惑于javascript中的事件绑定、事件冒泡、事件捕获和事件执行顺序
- 一个DOM元素绑定多个事件时,先执行冒泡还是捕获
- 一个DOM元素绑定多个事件时,先执行冒泡还是捕获
- DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
- DOM事件阶段以及事件捕获与事件冒泡先后执行顺序
- W3C下的冒泡和捕获机制。到底是冒泡呢。还是捕获呢。一个DOM元素绑定多个事件时如何执行。
- W3C下的冒泡和捕获机制。到底是冒泡呢。还是捕获呢。一个DOM元素绑定多个事件时如何执行。
- W3C下的冒泡和捕获机制。到底是冒泡呢。还是捕获呢。一个DOM元素绑定多个事件时如何执行。
- 事件冒泡和捕获的执行顺序
- 搭建自己的ss服务器与使用
- 基于OpenCV的车牌识别系统之二 ——字符分割与识别
- 树莓派驱动学习之GPIO
- 校内赛数据结构(rise,rotinv,seqmod)
- MTMonkey 安装和部署
- JavaScript-父子dom同时绑定捕获冒泡点击事件时执行顺序
- kafka入门
- Mybatis自动生成代码
- appium初识
- Ubuntu 14.04 LTS 开机自动打开浏览器、vlc播放器等
- 477. Total Hamming Distance | 整数间数的二进制中不同的位数
- 纯属自己的心得
- cad如何转换成pdf文档格式
- el表达式在jsp页面不起作用的解决方法