JS中的事件冒泡（Bubble）和事件捕获（capture）以及如何阻止事件的冒泡
对“捕获”和“冒泡”这两个概念，通常我们对冒泡了解和使用的会更多一些，因为在我们使用的所有浏览器中，都支持事件冒泡 ，即事件由子元素向祖先元素传播的，就 像气泡从水底向水面上浮一样。而在像firefox,chrome,safari这类所谓的标准浏览器中，事件传播通常是有三个阶段的：事件捕获阶段，事 件目标阶段，事件冒泡阶段，这三者的执行的顺序是先捕获在冒泡。对于捕获阶段，这个很少 有用武之地，所以被人疏忽遗忘也在所难免了，不常用不代表它不存在，本着科学严谨的态度，我们有必要去看一下它的庐山真面目。
事件冒泡：事 件冒泡指的是当前的目标元素触发事件的发生，事件在一次向祖先元素传播，在祖先元素上触发相同类型的事件。当子元素都有同一事件处理程序时，利用事件的冒 泡可以减少代码的冗余度。通过给元素对象绑定事件的方法addEventlistener()第三个参数决定事件的执行阶段是在冒泡阶段还是捕获阶段，当 第三个参数为false时，为冒泡阶段，通常省略该参数是默认的是冒泡，如果为true则是捕获阶段。为了兼容IE8以及IE8之前版本浏览器可以通过 attachEvent（）方法给元素添加事件不过他没有第三个参数。下面的例子是没有阻止事件冒泡时的代码，最终会看到，当点击了ele2时，事件会向 上冒泡依次输出ele2，ele，ele0，这个就是由于事件的冒泡引起的。
1 <html>
2 <head>
3 <meta charset="utf-8">
4 <title>bubble event</title>
5 <style>
6 .ele0{
7 width:400px;
8 height:400px;
9 border:1px solid black;
10 background-color:red;
11 position:relative;
12 }
13 .ele1{
14 width:300px;
15 height:300px;
16 border:1px ;
17 background-color:green;
18 position:absolute;
19 top:0;
20 }
21 .ele2{
22 width:200px;
23 height:200px;
24 border:1px ;
25 background-color:blue;
26 position:absolute;
27 top:0;
28 }
29 </style>
30 <script>
31 window.onload=function(){
32 var ele=document.getElementsByTagName("div");
33
34 if(ele[0].addEventListener)
35 {
36 ele[0].addEventListener("click", function (){
37
38 console.log("点击的是盒子ele0！");
39 });
40 }
41
42 else{
43 ele[0].attachEvent("onclick",function (){
44 console.log("点击的是盒子ele0！");
45
46 });
47 }
48 if(ele[1].addEventListener)
49 {
50 ele[1].addEventListener("click", function (){
51
52 console.log("点击的是盒子ele1!");
53 });
54 }
55
56 else{
57 ele[1].attachEvent("onclick",function (){
58 console.log("点击的是盒子ele1！");
59
60 });
61 }
62
63 if(ele[2].addEventListener)
64 {
65 ele[2].addEventListener("click", function (){
66
67 console.log("点击的是盒子ele2！");
68 });
69 }
70
71 else{
72 ele[2].attachEvent("onclick",function (){
73 console.log("点击的是盒子ele2！");
74
75 });
76 }
77
78 }
79 </script>
80 </head>
81 <body>
82 <div class="ele0">
83 <div class="ele1"><div class="ele2"></div></div>
84
85 </div>
86 </body>
87 <html>
事件捕获：事 件捕获过程与事件的冒泡阶段是一个相反的阶段，即事件由祖先元素向子元素传播，和一个石子儿从水面向水底下沉一样，要说明的是在 IE，opera浏览器中，是不存在这个阶段的。在上述的代码中给事件监听程序添加第三个参数false，当点击元素ele2时会看到不一样的效果，输出 结果中将会最先输出ele0，而不是ele2，这就是事件的捕获。
阻止事件的冒泡：
有时候事件的冒泡回会导致程序的运行顺序和自己想象的情形不一样，这时候就需要对事件的冒泡进行阻止。阻止事件的冒泡的方法与事件处理程序的添加方式有关：
1. 在除IE以外其他的浏览器中通过e.stopPropagation()方式阻止事件的冒泡。在 支持该方法的浏览器中还有一个方法stopimmediatePropagation()，该方法不仅会组织事件向祖元素的冒泡，同时也会阻止同一个节点 上同一事件的其他的事件处理程序的执行，该方法比前者阻止的更彻底。
2.在IE浏览器中通过e.cancleBubble=true,阻止事件冒泡。
1 <html>
2 <head>
3 <meta charset="utf-8">
4 <title>bubble event</title>
5 <style>
6 .ele0{
7 width:400px;
8 height:400px;
9 border:1px solid black;
10 background-color:red;
11 position:relative;
12 }
13 .ele1{
14 width:300px;
15 height:300px;
16 border:1px ;
17 background-color:green;
18 position:absolute;
19 top:0;
20 }
21 .ele2{
22 width:200px;
23 height:200px;
24 border:1px ;
25 background-color:blue;
26 position:absolute;
27 top:0;
28 }
29 </style>
30 <script>
31 window.onload=function(){
32 var ele=document.getElementsByTagName("div");
33
34 if(ele[0].addEventListener)
35 {
36 ele[0].addEventListener("click", function (e){
37
38 console.log("点击的是盒子ele0！");
39 e.stopPropagation();
40 });
41
42 }
43
44 else{
45 ele[0].attachEvent("onclick",function (e){
46 console.log("点击的是盒子ele0！");
47 e=window.event;
48 e.cancleBubble=true;
49
50 });
51 }
52 if(ele[1].addEventListener)
53 {
54 ele[1].addEventListener("click", function (e){
55
56 console.log("点击的是盒子ele1!");
57 e.stopPropagation();
58 });
59 }
60
61 else{
62 ele[1].attachEvent("onclick",function (e){
63 console.log("点击的是盒子ele1！");
64 e=window.event;
65 e.cancleBubble=true;
66
67 });
68 }
69
70 if(ele[2].addEventListener)
71 {
72 ele[2].addEventListener("click", function (e){
73
74 console.log("点击的是盒子ele2！");
75 e.stopPropagation();
76 });
77 }
78
79 else{
80 ele[2].attachEvent("onclick",function (e){
81 console.log("点击的是盒子ele2！");
82 e=window.event;
83 e.cancleBubble=true;
84
85 });
86 }
87
88 }
89 </script>
90 </head>
91 <body>
92 <div class="ele0">
93 <div class="ele1"><div class="ele2"></div></div>
94
95 </div>
96 </body>
97 <html>
阻止事件的默认行为：
1、在IE浏览器中通过e.returnValue=false
2、在其他浏览器中调用方法e.preventDefault();
3、在jQuery中通过在事件回调利用return false（其实质利用了上面的两种方式）实现阻止事件的默认行为
JS中的事件冒泡（Bubble）和事件捕获（capture）以及如何阻止事件的冒泡的更多相关文章
- [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...
- JS中的函数、Bom、DOM及JS事件
本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...
- 从零开始的JS生活（二）——BOM、DOM与JS中的事件
上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...
- JS中的DOM操作和事件
[DOM树节点] DOM节点分为三大类: 元素节点. 属性节点. 文本节点: 文本节点.属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点:可以使用getElement系列方法, ...
- JS中的事件&对象
一.JS中的事件 (一)JS中的事件分类 1.鼠标事件 click/dblclick/onmouseover/onmouseout 2.HTML事件 onload/onscroll/onsubmit/ ...
- js中DOM事件探究
事件 纲要 理解事件流 使用事件处理程序 不同的事件类型 javascript和html的交互是通过事件实现的.事件就是文档或浏览器窗口发生的一些特定交互瞬间.可以使用侦听器(事件处理程序)预定事件, ...
- 谈事件冒泡(Bubble)和事件捕捉(capture)
事件的发生顺序 假设在一个元素中又嵌套了另一个元素并且两者都有一个onClick事件处理函数(event handler).如果用户单击元素2,则元素1和元素2的单击事件都会被触发.但是哪一个事件先被 ...
- js之阻止事件冒泡(待修改)和阻止默认事件
阻止默认事件(event.stopPropagation()): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
- 在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 ...
随机推荐
- HDU5461 Largest Point（暴力）
这题第一眼就想到暴力.. 枚举每一个ti,就能确定tj,tj一定是剩下数最大或最小的.为了求tj就要求出数列最大最小次大次小.时间复杂度O(n). 感觉暴力挺有趣的. #include<cstd ...
- jqgrid显示一行的详情
http://blog.csdn.net/yangbobo1992/article/details/7930145 http://www.trirand.com/jqgridwiki/doku.php ...
- Storm命令详解
在Linux终端直接输入storm,不带任何参数信息,或者输入storm help,可以查看storm命令行客户端(Command line client)提供的帮助信息.Storm 0.9.0.1版 ...
- Java 集合系列08之 List总结(LinkedList, ArrayList等使用场景和性能分析)
概要 前面,我们学完了List的全部内容(ArrayList, LinkedList, Vector, Stack). Java 集合系列03之 ArrayList详细介绍(源码解析)和使用示例 Ja ...
- Grunt vs Gulp
grunt vs gulp 虽然gulp已经出来很久了,但是一直没有去使用过.得益于最近项目需要,就尝试了一下,以下从几个要点讲一下grunt和gulp使用的区别,侧重讲一下在使用gulp过程中发现的 ...
- BZOJ 1831 & 就是一个DP....
题意: 比如说,4 2 1 3 3里面包含了5个逆序对:(4, 2), (4, 1), (4, 3), (4, 3), (2, 1). 可惜的是,由于年代久远,这些数字里有一部分已经模糊不清了,为了方 ...
- CUDA程序设计(三)
算法设计:基数排序 CUDA程序里应当尽量避免递归,因而在迭代排序算法里,基数排序通常作为首选. 1.1 串行算法实现 十进制位的基数排序需要考虑数位对齐问题,比较麻烦.通常实现的是二进制位的基数排序 ...
- wamp环境下安装memcached最好的详解教程^.^：（只需要3个步骤 ）
win8.1 wampserver2.5 -Apache-2.4.9-Mysql-5.6.17-php5.5.12-64b 可以参考一下部分讲解有图,我就是看4-5个讲解,结合有一篇的截图最终才搞定的 ...
- 【BZOJ】3211: 花神游历各国
题意 \(n\)个点,第\(i\)个点值为\(a_i\).\(m\)个询问,每次询问\([l, r]\)内的和或者将\([l, r]\)的每个值改为自己的算术平方根.(\(n \le 100000, ...
- 【BZOJ】2697: 特技飞行
题意 \(k(1 \le k \le 300)\)种物品,价值分别为\(c_i(0 \le c_i \le 1000)\).有\(n(1 \le n \le 1000)\)分钟,每分钟可以选择一个物品 ...