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控制listbox中项的移动并排序
Nov 12 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
Mar 02 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
javascript使用location.search的示例
Nov 05 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
vue自定义全局共用函数详解
Sep 18 Javascript
JS实现换肤功能的方法实例详解
Jan 30 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 addslashes和mysql_real_escape_string
2010/01/24 PHP
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
Linux下php5.4启动脚本
2014/08/03 PHP
PHP JSON格式的中文显示问题解决方法
2015/04/09 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
jquery编写日期选择器
2017/03/16 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
[56:12]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第一场 6.3
2018/06/04 DOTA
python 获取本机ip地址的两个方法
2013/02/25 Python
python实现dict版图遍历示例
2014/02/19 Python
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
python安装及变量名介绍详解
2020/12/12 Python
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
J2EE系统只能是基于web
2015/09/08 面试题
社区党员先进事迹
2014/01/22 职场文书
2014年十一国庆节活动方案
2014/09/16 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书