在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. pyc和pycodeobject

    Python是一个先编译再解释的语言. 执行过程:先寻找pyc文件,找到则载入,没找到则把编译的结果保存在pycodeobject中,运行结束则写到pyc文件中

  2. asp.net boilerplate 配置文件加载

  3. 【算法笔记】B1013 数素数

    1013 数素数 (20 分) 令 P​i​​ 表示第 i 个素数.现任给两个正整数 M≤N≤10​4​​,请输出 P​M​​ 到 P​N​​ 的所有素数. 输入格式: 输入在一行中给出 M 和 N, ...

  4. 洛谷 P3191 [HNOI2007]紧急疏散EVACUATE（网络最大流）

    题解 二分答案+Dinic最大流 二分答案\(mid\) 把门拆成\(mid\)个时间点的门 相邻时间的门连一条\(inf\)的边 预处理出每个门到每个人的最短时间 为\(dis[k][i][j]\) ...

  5. [USACO12FEB]牛的IDCow IDs 一题多解（求二进制中有k个1 ，第n大的数)

    题目: FJ给他的奶牛用二进制进行编号,每个编号恰好包含K 个"1" (1 <= K <= 10),且必须是1开头.FJ按升序编号,第一个编号是由K个"1&q ...

  6. 兼容 火狐、IE 的中a标签用 javascript:void(0); 依然执行跳转的问题

    <a onclick="return false;" href="javascript: void(0)" target="_blank&quo ...

  7. vue脚手架初始化的项目 npm run build 无效，没有反应

    找到build文件夹的check-versions文件,注释掉如图所以代码即可.

  8. P1077

    f[i][j]:i种花放j盆的方案数 #include<bits/stdc++.h> using namespace std; const int maxn = 3e2+11; const ...

  9. ASP.Net Core 发布ABP项目遇到的错误

    1.HTTP 错误 500.19 - Internal Server Error 无法访问请求的页面,因为该页的相关配置数据无效. 与ASP.NET时代不同,ASP.NET Core不再是由IIS工作 ...

  10. mysql 查询 TOP N 问题

    Q:有一个学生成绩表,表名 stu(学生表),字段有:id(主键),name(学生姓名),subject(学科),score(分数) 1.查询该表中,所有科目都及格的学生 ; 说明:都及格的话,就是最 ...