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 ...
随机推荐
- js公有、私有、静态属性和方法的区别
现下,javascript大行其道,对于网站开发人员来说,javascript是必需掌据的一门语言,但随着jquery等框架的流行和使用,许多人对于原生javascript缺乏深入的理解, ...
- Squid的简单使用
1. squid配置 # Squid normally listens to port http_port hosts_file /etc/hosts cache_access_log /var/lo ...
- webpack入门教程
注:本文内容比较基础,供初学者快速入门参考. 更多详细信息请参考官方文档. 本文同步发布于我的博客,欢迎关注^_^ 1. 安装 npm install -g webpack 2. 基本使用 假设项目文 ...
- The design of a distributed variant of Plato framework to support collaborated editing
A first thought system architecture (pulling mode) is one that the server doesn't keep client inform ...
- ACM: HDU 2563 统计问题-DFS+打表
HDU 2563 统计问题 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u HDU 2 ...
- javascript new function()
// 执行的func生成一个空对象,如果有return就会把生成的func对象抛弃function func() {} alert(temp instanceof func) function fun ...
- NOIP提高组2004 合并果子题解
NOIP提高组2004 合并果子题解 描述:在一个果园里,多多已经将所有的果子打了下来,而且按果子的不同种类分成了不同的堆.多多决定把所有的果子合成一堆. 每一次合并,多多可以把两堆果子合并到一起,消 ...
- 【BZOJ】2172: Mario填格子
题意 \(3 * 3\)的网格,给出左上角的数字\(m\)和右下角的数字\(m\),如果当前格子有数字\(x\),格子左边有个数字\(y\),格子上面有个数字\(z\),则\(y|x, z|x\).格 ...
- GO语言练习：channel select 超时机制
1.代码 2.运行 3.解析 1.代码 package main import ( "time" "fmt" ) func waitFor(ch chan in ...
- xargs
xargs的作用一般等同于大多数Unix shell中的反引号,但更加灵活易用,并可以正确处理输入中有空格等特殊字符的情况.对于经常产生大量输出的命令如find.locate和grep来说非常有用.