在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. Linux 意外操作后如何进行数据抢救

    Linux 意外操作后如何进行数据抢救 在 GUI 中使用  shift + delete  组合键或是 CLI 下使用 rm -rf 删除选项,这个文件并没有从硬盘(或是其它存储设备)上彻底销毁.当 ...

  2. Python3之Memcache使用

    简介 Memcached是一个高性能的分布式内存对象缓存系统,用于动态WEB应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态,数据库网站的速度.Memcached ...

  3. 航天独角兽Spacex

    2018年2月7日下午3时45分,猎鹰重型火箭在位于卡纳维拉尔角的肯尼迪航天中心LC-39A平台顺利升空.火箭直升云霄,按照既定轨道持续升空,位于美国弗罗里达州卡纳维拉尔角的航天发射中心硝烟四起,非常 ...

  4. SqlBulkCopy使用注意事项

    1. 有标识列的表 1.1 SqlBulkCopyOptions.KeepIdentity  必须设置!否则会出现复制过去的数据产生标识列发现变化的情况! 1.2 如果原表的标识列即为主键, 那按1. ...

  5. poj 1220 NUMBER BASE CONVERSION

    NUMBER BASE CONVERSION Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 5976   Accepted: ...

  6. hdu1509 优先队列

    Windows Message Queue Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Ot ...

  7. 【CTF】某xss练手小游戏

    http://test.xss.tv 1.http://47.94.13.75/test/level1.php?name=test 直接插入即可,如: http://47.94.13.75/test/ ...

  8. python 可迭代对象，迭代器和生成器，lambda表达式

    分页查找 #5.随意写一个20行以上的文件(divmod) # 运行程序,先将内容读到内存中,用列表存储. # l = [] # 提示:一共有多少页 # 接收用户输入页码,每页5条,仅输出当页的内容 ...

  9. qs.parse(） 和 qs.stringfy() 之 传输数据秘籍

    qs是一个npm仓库所管理的包,可通过npm install qs命令进行安装. 1. qs.parse()将URL解析成对象的形式 const Qs = require('qs');let url ...

  10. TimesTen LINUX 安装日志

    $ ./setup.sh NOTE: Each TimesTen installation is identified by a unique instance name. The instance ...