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 相关文章推荐
深入分析js中的constructor和prototype
Apr 07 Javascript
jquery获取元素值的方法(常见的表单元素)
Nov 15 Javascript
javascript设置连续两次点击按钮时间间隔的方法
Oct 28 Javascript
2014最热门的JavaScript代码高亮插件推荐
Nov 25 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 Javascript
jquery版轮播图效果和extend扩展
Jul 18 jQuery
angularjs http与后台交互的实现示例
Dec 21 Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
通过实例学习React中事件节流防抖
Jun 17 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 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依赖注入知识点详解
2019/09/23 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
Python如何调用JS文件中的函数
2019/08/16 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
纽约海:Sea New York
2018/11/04 全球购物
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
在weblogic中发布ejb需涉及到哪些配置文件
2012/01/17 面试题
教师评优的个人自我评价分享
2013/09/19 职场文书
大三毕业自我鉴定
2014/01/15 职场文书
青春寄语大全
2014/04/09 职场文书
员工安全生产承诺书
2014/05/22 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
CSS中float高度塌陷问题的四种解决方案
2022/04/18 HTML / CSS
springboot实现string转json json里面带数组
2022/06/16 Java/Android