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 ...
随机推荐
- WPF拖放功能实现zz
写在前面:本文为即兴而作,因此难免有疏漏和词不达意的地方.在这里,非常期望您提供评论,分享您的想法和建议. 这是一篇介绍如何在WPF中实现拖放功能的短文. 首先要读者清楚的一件事情是:拖放主要分为拖放 ...
- POJO(PO)与javaBean的比较、以及DTO的说明
一.POJO(Plain Ordinary Java Object)简单的Java对象,其中有一些属性及其getter setter方法的类,没有业务逻辑(重点理解一下"没有业务逻辑&quo ...
- java中的IO操作总结
一.InputStream重用技巧(利用ByteArrayOutputStream) 对同一个InputStream对象进行使用多次. 比如,客户端从服务器获取数据 ,利用HttpURLConnect ...
- android 百度地图 通过剪裁图片添加 Marker
初始化百度地图: private void initViews() { mMapView = (MapView) findViewById(R.id.bmapView); mBaiduMap = mM ...
- [知识点]KMP算法
// 此博文为迁移而来,写于2015年5月24日,不代表本人现在的观点与看法.原始地址:http://blog.sina.com.cn/s/blog_6022c4720102w1iw.html 1.前 ...
- JSP -- for循环按钮处理事件
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- 查看那个进程占用了端口号（LINUX与AIX）
在LINUX中: netstat命令 [root@limt ~]# netstat -tulp Active Internet connections (only servers) Proto Rec ...
- SQL Server2008清空日志文件
USE[master] GO ALTER DATABASE mydbname SET RECOVERY SIMPLE WITH NO_WAIT GO ALTER DATABASE mydbname S ...
- Java Web页面跳转
Java Web的页面跳转分服务器跳转和客户端跳转: 服务器端跳转 的特点是:跳转之后浏览器的地址栏不会发生任何变化,在使用rquest属性范围时,能将request属性保存到跳转页.执行到跳转语句 ...
- jquery插件之拖拽
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽效果,您可以根据自己的实际需求来设置被拖拽元素是否可 ...