JS中绑定事件顺序（事件冒泡与事件捕获区别）
在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中绑定事件顺序（事件冒泡与事件捕获区别）的更多相关文章
- WPF教程六：理解WPF中的隧道路由和冒泡路由事件
WPF中使用路由事件升级了传统应用开发中的事件,在WPF中使用路由事件能更好的处理事件相关的逻辑,我们从这篇开始整理事件的用法和什么是直接路由,什么是冒泡路由,以及什么是隧道路由. 事件最基本的用法 ...
- 深入理解Node.js中的垃圾回收和内存泄漏的捕获
深入理解Node.js中的垃圾回收和内存泄漏的捕获 文章来自:http://wwsun.github.io/posts/understanding-nodejs-gc.html Jan 5, 2016 ...
- JS Event事件流（冒泡机制、捕获机制、事件绑定）
1.事件流 事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播 ...
- 在js中绑定onclick事件为什么不加括号，在html代码中必须要加？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 问题解决：在js中绑定onclick事件为什么不加括号，在html代码中必须要加？（转载）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【转】JavaScript 事件顺序：冒泡和捕获
补充说明:这篇文章通俗易懂地讲解了冒泡和捕获原理,原文来自 ppk 大侠的 quirksmode 站点.感谢网友 hh54188 的翻译. 事件的发生顺序 这个问题的起源非常简单,假设你在一个元素中又 ...
- 在javascript中的浏览器兼容问题以及兼容浏览器汇总（默认事件，阻止冒泡，事件监听。。。）以及解决方式详解
在javascript中常见的浏览器兼容问题,以及解决方式. 在前端工作当中我们遵循这样的原则:渐进增强和优雅降级 渐进增强(progressive enhancement): 针对低版本浏览器进 ...
- Promise对象及它在js中的执行顺序
关于Promise对象的学习及它的执行顺序 学习阮一峰老师的ES6入门后的记录 1.promise的定义 promise是一个对象,通常包裹着一个异步操作,promise对象提供一些接口的方法,返回一 ...
- JS中函数执行顺序的问题？
作者:知乎用户链接:https://www.zhihu.com/question/23564807/answer/82996422来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...
随机推荐
- 51nod1258 序列求和 V4（伯努利数+多项式求逆）
题面 传送门 题解 不知道伯努利数是什么的可以先去看看这篇文章 多项式求逆预处理伯努利数就行 因为这里模数感人,所以得用\(MTT\) //minamoto #include<bits/stdc ...
- Java面向对象之多态（成员访问特点） 入门实例
一.基础概念 多态的调用方式在子父类中的特殊体现. 1.访问成员变量特点: 当子父类中出现同名成员变量时. 多态调用时,编译和运行都参考引用型变量所属的类中的成员变量. 即编译和运行看等号的左边. 2 ...
- 1. C/C++项目一
需求: 使用C语言封装string 字符串,实现字符串的增.删.改.查等API函数. 要求: 不能使用 string 库函数,所有库函数必须自己手动实现. [项目实现] myString.h 代码如下 ...
- 添加win10激活工具
其实我们可以随便准备一个win10的激活密钥激活! 以管理员的身份进入到CMD下.. slmgr.vbs /upk 清除掉旧的slmgr /ipk W269N-WFGWX ...
- ansible基本模块-server
ansible XXX -m service -a "name=XXX state=started enabled=yes"
- C#实现，一列数的规则如下: 1、1、2、3、5、8、13、21、34...... 求第35位数是多少， 用递归算法实现
方法函数可以通过调用自身来进行递归.计算理论可以证明递归的作用可以完全取代循环. static void Main(string[] args) { Console.WriteLine(Ra()); ...
- struts2学习笔记（一）—— struts2介绍及入门程序
一.struts2概述 1.1 什么是struts2? 在介绍Struts2之前,先来认识一下Struts1.Struts1是最早的基于MVC模式的轻量级web框架,他能够合理的划分代码结构,并包含了 ...
- Spring Eureka的使用入门--服务端与客户端
接上篇: Eureka作为注册中心,连接服务端与客户端: 服务端: 依赖包: apply plugin: 'org.springframework.boot' apply plugin: 'io.sp ...
- python 并发之多进程实现
一.multipricessing模块的介绍 python中的多线程无法利用多核优势,如果想要充分的使用多核CPU资源,在python中大部分情况下需要用多线程,python提供了multiproce ...
- CF D - Beautiful Graph（dfs 染色问题吧）给你一个图，每个节点可以赋值1,2,3三种数字，相邻的节点的和必须是奇数，问有多少中方法。
题意: 给你一个图,每个节点可以赋值1,2,3三种数字,相邻的节点的和必须是奇数,问有多少中方法. 分析: 很容易就可以发现如果这个图中是有奇数的环的话,那这是肯定不行的 ,否则这个环的贡献是为2^s ...