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实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 Javascript
禁止IE用右键的JS代码
Dec 30 Javascript
ActiveX控件与Javascript之间的交互示例
Jun 04 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
jquery事件绑定解绑机制源码解析
Sep 19 Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
详解JavaScript中操作符和表达式
Sep 12 Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 Javascript
24个解决实际问题的ES6代码片段(小结)
Feb 02 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 静态变量的初始化
2009/11/15 PHP
PHPMailer邮件发送的实现代码
2013/05/04 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
jQuery Tools tab使用介绍
2012/07/14 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
2020/04/30 jQuery
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
用Python实现换行符转换的脚本的教程
2015/04/16 Python
django 多数据库配置教程
2018/05/30 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
对python函数签名的方法详解
2019/01/22 Python
Python requests设置代理的方法步骤
2020/02/23 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
开业主持词
2014/03/21 职场文书
《春雨》教学反思
2014/04/24 职场文书
公司募捐倡议书
2014/05/14 职场文书
计算机专业自荐信
2014/05/24 职场文书
中层干部考核评语
2015/01/04 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
刑事申诉状范文
2015/05/20 职场文书
python中 .npy文件的读写操作实例
2022/04/14 Python