在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绑定的事件触发；

JS中绑定事件顺序（事件冒泡与事件捕获区别）的更多相关文章

  1. WPF教程六：理解WPF中的隧道路由和冒泡路由事件

    WPF中使用路由事件升级了传统应用开发中的事件,在WPF中使用路由事件能更好的处理事件相关的逻辑,我们从这篇开始整理事件的用法和什么是直接路由,什么是冒泡路由,以及什么是隧道路由. 事件最基本的用法 ...

  2. 深入理解Node.js中的垃圾回收和内存泄漏的捕获

    深入理解Node.js中的垃圾回收和内存泄漏的捕获 文章来自:http://wwsun.github.io/posts/understanding-nodejs-gc.html Jan 5, 2016 ...

  3. JS Event事件流（冒泡机制、捕获机制、事件绑定）

    1.事件流 事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播 ...

  4. 在js中绑定onclick事件为什么不加括号，在html代码中必须要加？

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 问题解决：在js中绑定onclick事件为什么不加括号，在html代码中必须要加？（转载）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 【转】JavaScript 事件顺序：冒泡和捕获

    补充说明:这篇文章通俗易懂地讲解了冒泡和捕获原理,原文来自 ppk 大侠的 quirksmode 站点.感谢网友 hh54188 的翻译. 事件的发生顺序 这个问题的起源非常简单,假设你在一个元素中又 ...

  7. 在javascript中的浏览器兼容问题以及兼容浏览器汇总（默认事件，阻止冒泡，事件监听。。。）以及解决方式详解

    在javascript中常见的浏览器兼容问题,以及解决方式. 在前端工作当中我们遵循这样的原则:渐进增强和优雅降级   渐进增强(progressive enhancement): 针对低版本浏览器进 ...

  8. Promise对象及它在js中的执行顺序

    关于Promise对象的学习及它的执行顺序 学习阮一峰老师的ES6入门后的记录 1.promise的定义 promise是一个对象,通常包裹着一个异步操作,promise对象提供一些接口的方法,返回一 ...

  9. JS中函数执行顺序的问题？

    作者:知乎用户链接:https://www.zhihu.com/question/23564807/answer/82996422来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...

随机推荐

  1. Struts、Hibernate和Spring的整合

    Spring整合Hibernate Spring以其开放性,能与大部分ORM框架良好的整合．这样Spring就能轻松地使用ORM. Spring提供了DAO支持,DA0组件是应用的持久层访问的重要组件 ...

  2. Udp -内部缓冲区

    1.每个socket关联了两个缓冲区,一个用于发送,一个用于接收. 2. 3.发送:(1)sendto()把数据放在sendbuf(缓冲区),通知os来取 (2)os在适当的时候过来取数据,并发到网络 ...

  3. System.Security.Cryptography.CryptographicException

    在调用System.Security.Cryptography.ProtectedData.Protect方法来保护私密信息时,IIS可能会报以下错误:CryptographicException: ...

  4. O(n^2) 级别的排序算法

    o(n^2) 的排序算法.性能那么差,为什么还要学习? 首先,它是基础,千里之行,始于足下.它编码简单,容易实现,是一些简单情景的首选,它能给我们的问题一个暴力的解法,这样的解法也许不是最优的,但是它 ...

  5. mysql 面试题

    1.一张表,里面有ID自增主键,当insert了17条记录之后,删除了第15,16,17条记录,再把Mysql重启,再insert一条记录,这条记录的ID是18还是15 ?   2.Mysql的技术特 ...

  6. 老男孩python作业6-选课系统开发

    角色:学校.学员.课程.讲师要求:1. 创建北京.上海 2 所学校2. 创建linux , python , go 3个课程 , linux\py 在北京开, go 在上海开3. 课程包含,周期,价格 ...

  7. mysql 查询库中有几张表

    SELECT COUNT(*) TABLES, table_schemaFROM information_schema.TABLESWHERE table_schema = '999*999' 999 ...

  8. 【算法笔记】B1043 输出PATest

    1043 输出PATest (20 分) 给定一个长度不超过 10​4​​ 的.仅由英文字母构成的字符串.请将字符重新调整顺序,按 PATestPATest.... 这样的顺序输出,并忽略其它字符.当 ...

  9. Carryon 数数字

    Carryon 数数字 描述 Carryon 最近迷上了数数字,然后 Starry 给了他一个区间[l,r] ,然后提了几个要求, 需要将 l 到 r 之间的数全部转化成 16 进制,然后连起来. 将 ...

  10. AtCoder Beginner Contest 113 B

    B - Palace Time limit : 2sec / Memory limit : 1024MB Score: 200 points Problem Statement A country d ...