前方是什么
js冒泡关系
&title&study&/title&
&meta http-equiv="content-type" content="text/charset=gb2312" /&
&mce:script type="text/javascript" language="javascript"&&!--
function add(str){
var ostr=document.getElementById("display");
ostr.innerHTML+=str+" ";
// --&&/mce:script&
&body onclick="add('body')"&
&div onclick="add('div')"&
&font onclick="add('font')"&
点击这儿！
&div id="display"&&/div&
点击这儿！
font div body
没有更多推荐了，一、什么是事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
打个比方说：你在地方法院要上诉一件案子，如果地方没有处理此类案件的法院，地方相关部门会帮你继续往上级法院上诉，比如从市级到省级，直至到中央法院，最终使你的案件得以处理。
二、事件冒泡有什么作用
（1）事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
【集中处理例子】
&div onclick=&eventHandle(event)& id=&outSide& style=&width:100 height:100 background:#000; padding:50px&&
&div id=&inSide& style=&width:100 height:100 background:#CCC&&&/div&
&script type=&text/javascript&&
//本例子只在外面盒子定义了处理方法，而这个方法一样可以捕获到子元素点击行为并处理它。假设有成千上万子元素要处理，难道我们要为每个元素加“onclick=&eventHandle(event)&”？显然没有这种集中处理的方法来的简单，同时它的性能也是更高的。
function eventHandle(e)
var e=e||window.event;
var obj=e.target||e.srcElement;
alert(obj.id+' was click')
(2）让不同的对象同时捕获同一事件，并调用自己的专属处理程序做自己的事情，就像老板一下命令，各自员工做自己岗位上的工作去了。
【同时捕获同一事件例子】
&div onclick=&outSideWork()& id=&outSide& style=&width:100 height:100 background:#000; padding:50px&&
&div onclick=&inSideWork()& id=&inSide& style=&width:100 height:100 background:#CCC&&&/div&
&script type=&text/javascript&&
function outSideWork()
alert('My name is outSide,I was working...');
function inSideWork()
alert('My name is inSide,I was working...');
//因为下面程序自动激活单击事件，有些浏览器不允许，所以请单击灰色盒子，从这里开始下命令，这样因为冒泡的原因，黑色大盒子也会收到单击事件，并调用了自己的处理程序。如果还有更多盒子嵌套，一样道理。
function bossOrder()
document.getElmentById('inSide').click();
bossOrder();
三、需要注意什么
●事件捕获其实有三种方式，事件冒泡只是其中的一种：（1）IE从里到外（inside→outside）的冒泡型事件。（2）Netscape4.0从外到里（outside→inside）的捕获型事件。（3）DOM事件流，先从外到里，再从里到外回到原点（outside→inside→outside）的事件捕获方法（似乎对象将触发两次事件处理，这有什么作用？鄙人不懂！）。
●不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload。
●事件捕获方式在不同浏览器，甚至同种浏览器的不同版本中是有所区别的。如Netscape4.0采用捕获型事件解决方案，其它多数浏览器则支持冒泡型事件解决方案，另外DOM事件流还支持文本节点事件冒泡。
●事件捕获到达顶层的目标在不同浏览器或不同浏览器版本也是有区别的。在IE6中是接收事件冒泡的，另外大部分浏览器将冒泡延续到window对象，即……body→documen→window。
●阻止冒泡并不能阻止对象默认行为。比如submit按钮被点击后会提交表单数据，这种行为无须我们写程序定制。
四、阻止事件冒泡
通常情况下我们都是一步到位，明确自己的事件触发源，并不希望浏览器自作聪明、漫无目的地去帮我们找合适的事件处理程序，即我们明确最精准目标，这种情况下我们不需要事件冒泡。另外通过对事件冒泡的理解，我们知道程序将做多较多额外的事情，这必然增大程序开销。还有一个重要的问题是：事件冒泡处理可能会激活我们本来不想激活的事件，导致程序错乱，甚至无从下手调试，这常成为对事件冒泡不熟悉程序员的棘手问题。所以必要时，我们要阻止事件冒泡。
【不想激活的事件被激活例子】
&div onclick=&openWin('http://www.chhua.com')& id=&outSide& style=&width:100 height:100 background:#000; padding:50px&&
&div onclick=&openWin('http://www.google.com')& id=&inSide& style=&width:100 height:100 background:#CCC&&&/div&
&script type=&text/javascript&&
//本例你实际希望点击灰色盒子打开google首页，而点击黑色盒子打开www.chhua.com发发首页，但结果你点击灰色盒子的时候，却是同时打开了两个网页。其实在实际设计中较少遇到此问题，你可能会想如果我在页面不同DOM深处安置了不同的按钮或链接，深层处的事件触发会不会波及顶层的按钮呢？不会，因为按钮不能形成嵌套关系。
function openWin(url)
window.open(url);
下面是本人在网上抄的一个方法，把这个方法放在精准目标对象处理程序结尾，本事件触发处理结束后，事件将不在进行冒泡处理。
【阻止事件冒泡例子】
&div onclick=&showMsg(this,event)& id=&outSide& style=&width:100 height:100 background:#000; padding:50px&&
&div onclick=&showMsg(this,event)& id=&inSide& style=&width:100 height:100 background:#CCC&&&/div&
&script type=&text/javascript&&
//阻止事件冒泡后，你点击灰色盒子，整个过程只弹一次对话框了（注意与默认情况对比）
function showMsg(obj,e)
alert(obj.id);
stopBubble(e)
//阻止事件冒泡函数
function stopBubble(e)
if (e && e.stopPropagation)
e.stopPropagation()
window.event.cancelBubble=true
自由转载，转载请注明： 转载自 www.chhua.com
本文链接地址:
http://www.chhua.com/web-note1109技术QQ交流群:
JS中的冒泡简洁理解
微软提出了名为事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。
&!DOCTYPE html&
&meta charset="utf-8"/&&title&JS事件冒泡&/title&
&div id="divOne" onclick="ad()"&
&div id="divTwo" onclick="ac()"&
&a id="hr_three" href="http://www.baidu.com"
onclick="ab(event)"&点击我&/a&
function ad(){
alert('我是最外层');
function ac(){
alert('我是最中间层层');
function ab(){
alert('我是最里层');
stopPropagation();方法：
终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。
该方法将停止事件的传播，阻止它被分派到其他Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点
&!DOCTYPE html&
&meta charset="utf-8"/&&title&JS事件冒泡&/title&
&div id="divOne" onclick="ad()"&
&div id="divTwo" onclick="ac()"&
&a id="hr_three" href="http://www.baidu.com"
onclick="ab(event)"&点击我&/a&
function ad(){
alert('我是最外层');
function ac(){
alert('我是最中间层层');
function ab(event){
alert('我是最里层');
event.stopPropagation();
没有更多推荐了，& & & &今天要跟大家谈的是事件冒泡，这个事件呢，也是两面性的，有时候给我们带来bug,有时候优点也很明显。我们就一起来看看它的真面目。
&首先看看事件冒泡是什么？
&事件冒泡 ：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 但事件确实传递了。）
只看这句话，或许不是那么好理解，下面来看个栗子：
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div2.onclick = function(){alert(1);};
div1.onclick = function(){alert(2);};//父亲
//html代码
&div id="div1"&
&div id="div2"&&/div&
代码很简单，就是两个父子关系的div,然后分别加了点击事件，当我们在div2里面点击的时候，会发现弹出了一次1，接着又弹出了2，这说明点击的时候，不仅div2的事件被触发了，它的父级的点击事件也触发了，这种现象就叫做冒泡。点击了div1,自己父级的点击事件也会被触发。
再看个栗子
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2")
div1.onclick = function(){alert(2);}; // 父亲
//html代码 &div id="div1"& &div id="div2"&&/div& &/div&
大家可以看一下效果图，相比于第一个例子，代码已经把儿子的点击事件去掉，只留下了父级的，测试的结果是当只点击了儿子，会弹出2，由此证明了当点击了儿子，父亲的点击事件被触发，执行了自己绑定的函数。由于一些人会以为显示出来儿子在父亲里面的时候，自然点了儿子相当于点了父亲，所以这个例子我故意把两个盒子绝对定位在了两个不同的位置，所以点击事件给页面显示出来的位置是没关系的，而是跟html代码中的位置有关系。
可能有人会有疑惑下面这种情况，为啥没有弹出两次：
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div2.onclick = function(){alert(1);};
div1.onclick = function(){};
//html代码
&div id="div1"&
&div id="div2"&&/div&
这里我们要注意，我们传递的仅仅是事件触发，也就是说当点击div2仅仅触发了父级的点击事件，并没有把自己的绑定的函数给父级，父级的执行情况，取决于自己所绑定的函数，因为在这里它绑定的函数是空，自然没什么表现。有些人在这里有误解，所以强调一下。
以上大概就是冒泡的形式了，而大多数时候，冒泡也带来了一些困扰，下面我们看一个栗子：
我们的需求是点击上面红色的面板让下面粉色的面板显示，点击其他地方再让粉丝面板隐藏。于是我们会这样写js代码：
var div2 = document.getElementById("div2");
var div1 = document.getElementById("div1");
div2.onclick = function(){
//红色面板事件
div1.style.display = "block";
document.onclick = function(){
div1.style.display = "none";
这个时候我们测试发现，怎么点击红色面板，粉丝面板都不会显示了，为什么呢？就是冒泡的原因，我们来分析下代码，当点击div2的时候，他会触发父亲级别的点击事件，然后一层一层的往上传，所以document的点击事件自然也被触发了，然后执行了自己身上的绑定事件，让粉色面板消失。所以当你点击div2的时候首先，让粉丝面板显示，只是事件执行太快了，很快又执行了document的点击事件，让面板隐藏。 有兴趣的可以再两个事件之间加一个弹出，就可以测试。
那么这个时候我们肯定不希望有冒泡了，所以解决办法就是取消冒泡了：（后来补充）
&取消事件冒泡有两种方式：
标准的W3C 方式：e.stopPropagation();这里的stopPropagation是标准的事件对象的一个方法，调用即可
非标准的IE方式:ev.cancelBubble= &这里的cancelBubble是 IE事件对象的属性，设为true就可以了
通常我们会封装这样一个函数：
function stopBubble(e) {
//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
//否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
这个时候需要用到事件对象里的&cancelBubble属性，把它设为true即可，ev.cancelBubble=所以改进后的代码如下：&script&
var div2 = document.getElementById("div2");
var div1 = document.getElementById("div1");
div2.onclick = function(ev){
// 红色面板加事件
div1.style.display = "block";
stopBubble(ev)；//这样就不会再冒泡给父级了 }; document.onclick = function(){
div1.style.display = "none"; }
function stopBubble(e) {
//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
//否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
&其实冒泡还有一大优点，就是事件委托，而且经常用到，还能提高很大的性能，想要了解，看下篇博客喽，我们沐晴，下回不见不散。
阅读(...) 评论()JavaScript捕获和冒泡探讨-前端开发博客 最新文章
推荐文章 4297Views 45621Views 3709Views 2835Views 7225Views热门文章
9,101Views
3,750Views
3,653Views
2,260Views
1,990Views
1,586Views查看更多相关吗？百度搜索：javascript 事件冒泡javascript冒泡排序javascript 冒泡javascript 阻止冒泡javascript 停止冒泡javascript 冒泡算法");}