JS中绑定事件顺序(事件冒泡与事件捕获区别)


Posted in Javascript onJanuary 24, 2017

在JS中,绑定的事件默认的执行时间是在冒泡阶段执行,而非在捕获阶段(重要),这也是为什么当父类和子类都绑定了某个事件,会先调用子类绑定的事件,后调用父类的事件。直接看下面实例

<!Doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
 <style type="text/css">
 *{margin:0;padding: 0;}
 </style>
</head>
<body>
<div id="id1" style="height:400px; border:1px solid #000;">
 <div id="id2" style="height:200px; border:1px solid #000;">
 <div id="id3" style="height:50px; border:1px solid #000;"></div>
 </div>
</div>
</body>
<script type="text/javascript">
 var obj1=document.getElementById('id1'); 
 obj1.addEventListener('click',function(){
 alert('id1');
 },false);
 var obj2=document.getElementById('id2');
 obj2.addEventListener('click',function(){
 alert('id2');
 },true);
 var obj3=document.getElementById('id3');
 obj3.addEventListener('click',function(){
 alert('id3');
 },true);
 /*如果第三个参数为true,则事件在捕获阶段执行,如果第三个参数为false,则事件在冒泡阶段执行*/
</script>
</html>

当点击id3元素时候,执行结果是:id2,id3,id1

解析:因为obj2与obj3绑定的方法在捕获阶段执行,obj1的事件在冒泡阶段执行。

总结

在JS中,绑定的事件默认的执行时间是在冒泡阶段执行,而非在捕获阶段,必须要理解

不过我们可以通过绑定事件时,指定事件执行时间是在冒泡阶段还是捕获阶段。

obj.addEventListener(event,function(){},bool)

bool:false,代表冒泡阶段执行

bool:true,代表捕获阶段执行

JS在默认情况下获取事件后,就开始从根元素开始捕获所有该事件的监听对象,然后在冒泡阶段逐一执行。捕获阶段是在冒泡阶段前面

阻止冒泡

w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true;

阻止默认行为

w3c的方法是e.preventDefault(),IE则是使用e.returnValue = false;

关于JS 事件冒泡和onclick,click,on()事件触发顺序

onclick,click,on()的优先关系:onclick>click>on();

onclick和click绑定的事件,彼此之间遵守事件冒泡规则,从内到外触发;

on()绑定的事件,总是晚于onclick和click绑定的事件触发;

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
javascript实现上传图片并预览的效果实现代码
Apr 11 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
Sep 13 Javascript
用innerhtml提高页面打开速度的方法
Aug 02 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
May 21 Javascript
angular.element方法汇总
Jan 07 Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 Javascript
关于JS中的方法是否加括号的问题
Jul 27 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
Mar 21 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
在vue中使用express-mock搭建mock服务的方法
Nov 07 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
Jan 24 #Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 #Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 #Javascript
Jquery树插件zTree实现菜单树
Jan 24 #Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
Jan 24 #Javascript
树结构之JavaScript
Jan 24 #Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 #Javascript
You might like
PHP自动生成月历代码
2006/10/09 PHP
PHP个人网站架设连环讲(四)
2006/10/09 PHP
并发下常见的加锁及锁的PHP具体实现代码
2010/10/12 PHP
php的array_multisort()使用方法介绍
2012/05/16 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
JavaScript中的this实例分析
2011/04/28 Javascript
javascript中常用编程知识
2013/04/08 Javascript
对frameset、frame、iframe的js操作示例代码
2013/08/16 Javascript
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
javascript实现瀑布流动态加载图片原理
2016/08/12 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
通过bootstrap全面学习less
2016/11/09 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
JS中min函数实例讲解
2019/02/18 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
vue实现登录拦截
2020/06/29 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
浅谈python中set使用
2016/06/30 Python
python使用os.listdir和os.walk获得文件的路径的方法
2017/12/16 Python
python调用摄像头拍摄数据集
2019/06/01 Python
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
亲属关系公证书样本
2015/01/23 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
详解Java实现设计模式之责任链模式
2021/06/23 Java/Android
python和anaconda的区别
2022/05/06 Python