JavaScript-父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序
2016-05-12 20:18
826 查看
JavaScript-父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序
事件的执行顺序绝对是让人头疼的问题。当父元素与子元素都绑定了多个事件,且有的绑定在冒泡阶段、有的绑定在捕获阶段时,事件的触发顺序如何?如果你只关心这个问题,请直接下滑到3. 绑定多个事件,且由用户行为触发。如果你想细致了解JavaScript中的事件发生,请慢慢阅读。1. 原生事件的发生顺序
一般来讲,当为一个a标签添加click事件以后,点击这个标签,会先执行绑定的事件、后跳转页面。一个input绑定blur事件以后,你在input里输入完内容,点击提交按钮,会先发生blur事件,后发生click事件。当然,这是一般来讲。我在一个React项目中曾经发生表单提交时,先发生click事件,blur事件没有来得及发生,造成表单内容没有检验就提交到后台,原因我至今没有找到,解决办法是在click事件上加一个50ms的延迟。2. 自定义事件
JavaScript中也支持手动触发事件,请看下面代码。a.addEventListener('click', function(){ console.log(input.value); console.log(this.getAttribute('href')); console.log(location.href); }, false); //a是我已经通过id获得好的一个a标签 var event = document.createEvent('HTMLEvents'); // initEvent接受3个参数: 事件类型,是否冒泡,是否阻止浏览器的默认行为 event.initEvent('click', true, true); event.eventType = 'click'; //触发a上绑定的自定义事件 a.dispatchEvent(event); //注:jQuery中有更简单的trigger()方法实现自定义事件功能
JavaScript中自定义事件的类型有(即
document.createEvent('HTMLEvents')中的参数):
1. UIEvents:一般化的UI事件。
2. MouseEvents:一般化的鼠标事件。
3. MutationEvents:一般化的DOM变动事件。
4. HTMLEvents:一般化的HTML事件。
自定义事件的发生比较容易控制,你什么时候触发(dispatchEvent/fireEvent)它,它就什么时候发生。
3. 绑定多个事件,且由用户行为触发
这个情况最复杂,也是标题中的情况:父元素与子元素都绑定多个事件,且有的事件在捕获阶段、有的事件在冒泡阶段。下面这个例子,父元素div绑定两个事件(一个冒泡阶段、一个捕获阶段),子元素也是这种情况。事件触发顺序如何。
var btn = document.querySelector('button'); var div = document.querySelector('div'); btn.addEventListener('click', function(){ console.log('bubble','btn'); },false); btn.addEventListener('click', function(){ console.log('capture','btn'); },true); div.addEventListener('click', function(){ console.log('bubble','div'); },false); div.addEventListener('click', function(){ console.log('capture','div'); },true);
执行结果:
乍一看这个结果有些乱,但仔细分析可以得出结论:
绑定在被点击元素的事件是按照代码顺序发生,其他元素通过冒泡或者捕获“感知”的事件,按照W3C的标准,先发生捕获事件,后发生冒泡事件。所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件 。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享