jQuery事件冒泡机制与解决

（1）什么是事件起泡 
首先你要明白一点，当一个事件发生的时候，该事件总是有一个事件源，即引发这个事件的对象，一个事件不能凭空产生，这就是事件的发生。 


当事件发生后，这个事件就要开始传播。为什么要传播呢？因为事件源本身并没有处理事件的能力。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身不能处理这个事件（废话），事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件）。 


当事件在传播过程中，找到了一个能够处理它的函数，这时候我们就说这个函数捕捉到了这个事件。 


说到这里，关键的问题来了，那就是一个函数是如何捕捉一个事件的呢？这就涉及到事件的冒泡了。 


为了更好地理解冒泡的概念，我建议你现在想象一下你的面前放着一杯水，但这杯水和我们平时看到的有点点不同，它分为数层，每一层又分成一或多个区域，最顶层是我们熟悉的窗口对象（即window对象），下一层分为好几个区域（document对象、history对象等等），而document对象的下一层又分为多个子对象。 


这些对象的层次关系构成了DOM中的对象树。 
事件的传播是有方向的，当点击一个按钮时所产生的事件从这个按钮处开始向上传播（就像一个水泡从杯底冒上来，这就是之所以叫事件冒泡的原因），但这个事件总是寻找特定的属性是否有值。例如按钮的click事件先寻找在按钮上是否有onclick属性的有意义的定义（即该属性指向一个存在的函数或一段可执行的语句），如果有，执行这个函数或语句；然后事件继续向上传播，到达按钮的上一层对象（例如一个form对象或document对象，总之是包含了按钮的父对象），如果该对象也定义了onclick属性，则执行属性的值。 


所以，如果这个按钮上面有3层（form、document、window），且这三层都定义了onclick属性，则当按钮的click事件产生时，将会调用4个（包括按钮本身的一个）函数或执行4段语句。 
事件的这几个特性在0级dom中也是适用的。 


（2）jquery阻止事件起泡实例 
1、通过返回false来取消默认的行为并阻止事件起泡。 
jQuery 代码: 
. 代码如下:


$("form").bind( 
　　"submit", 
　　function() { 
　　　　return false; 
　　 } 
); 


2、通过使用 preventDefault() 方法只取消默认的行为。 
jQuery 代码: 
. 代码如下:


$("form").bind( 
　　"submit", 
　　function(event){ 
　　　　event.preventDefault(); 
　　} 
); 


3、通过使用 stopPropagation() 方法只阻止一个事件起泡。 
jQuery 代码: 
. 代码如下:


$("form").bind( 
　　"submit", 
　　function(event){ 
　　　　event.stopPropagation(); 
　　} 
); 


（3）关于js事件起泡的验证 
今天这个问题主要涉及到几个关键词：对象，触发事件，捕获事件，执行处理、起泡。这其实就是整个js执行的过程。其中冒泡这个过程很有意思。其实就像是一杯水，但是这杯水是分层次的，最底下是当前触发事件的对象。然后越往上范围越大，最顶层肯定是window，倒数第二层是document。气泡在上浮过程中会判断当前所到达的层有没有绑定事件处理方法。有话就执行相应的处理。没有的话就继续起泡。直到到达最顶层的window窗口层。我们可以在任何一层做相应的处理以阻止事件继续起泡。方法就是调用事件对象的阻止起泡的方法。event.stopPropagation();下面是写的一个验证js事件起泡的过程方法。 
. 代码如下:


<script type="text/javascript"> 
$(document).ready(function(){ 
$('.one').click(function(e){ 
alert('one'); 
});　　　　　　　　　　　　 
$('.two').click(function(e){ 　 
alert('two'); 
}); 
$('.three').click(function(e){ 
alert('three'); 
//阻止起泡取消下面的注释 
// e.stopPropagation(); 
}); 
}); 
</script> 
<div class="one" style="width:200px;height:200px;background:green;"> 
one 
<div class="two" style="width:150px;height:150px;background:yellow;"> 
two 
<div class="three"> 
three 
</div> 
</div> 
</div> 


（4）总结 
1.一个事件起泡对应触发的是上层的同一事件 
　　特殊：如果two设置成双击事件，那么在你单击two的时候就会起泡触发one单击的事件 
　　（双击包含单击）。 
2.如果在click事件中，在你要处理的事件之前加上e.preventDefault(); 
　那么就取消了行为（通俗理解：相当于做了个return操作），不执行之后的语句了。 
3.e.stopPropagation()只要在click事件中，就不会触发上层click事件。










当页面上发生一个事件时，每个层次上的DOM元素都有机会处理这个事件。
<div class="div_xiaozi">
    <span class="span_xiaozi">
        <a href="http://www.xiaoxiaozi.com/" mce_href="http://www.xiaoxiaozi.com/" target="_blank" class="a_xiaozi">小小子欢迎您</a>
    </span>
    <p class="p_xiaozi">
        这里至少还有我，小小子，存在~
    </p>
</div>
举例来说，如果单击了页面中的超链接（锚元素），那么<div>、<span>和<a>全都应该得到响应这次单击的机会。
因为这三个元素毕竟都是在用户的鼠标指针之下啊。那么，最终响应的效果是什么样的呢？
在事件捕获的过程中，事件首先会交给最外层的元素，接着再交给更具体的元素。
在事件冒泡中，当事件发生时，会首先发送给最具体的元素，在这个元素获得响应机会之后，事件会向上冒泡至更一般的元素。
那么，什么浏览器采用的是“事件捕获”模式，而又有哪些采用的是“事件冒泡”模式呢？
其实，最终出台的DOM标准规定应该同时使用这两种策略：首先，事件要从一般到具体进行捕获，钴，事件再通过冒泡返回DOM树的顶层。而事件处理可以注册到这个过程中的任何一部分。即，可以把事件处理程序注册到事件捕获阶段，也可以注册到事件冒泡阶段。
jQuery为了提供跨浏览器的一致性，它始终会在冒泡阶段注册事件处理程序。因此，我们总可以假定最具体的元素会首先获得响应事件的机会。
 
“事件冒泡”可能会导致我们预想不到的事情发生，比如，错误的元素响应mouseover或mouseout事件的情况下。
 
添加css:
view plaincopy to clipboardprint?
01..div_xiaozi{border:1px solid red;} 
.div_xiaozi{border:1px solid red;}
 
jquery代码：
view plaincopy to clipboardprint?
01.$(document).ready(function(){  
02.    $(".a_xiaozi").mouseout(function(){  
03.        alert("鼠标从超链接上走出来喽");  
04.    });  
05.    $(".span_xiaozi").mouseout(function(){  
06.        alert("鼠标从SPAN上走出来喽");  
07.    });  
08.    $(".p_xiaozi").mouseout(function(){  
09.        alert("鼠标从P上走出来喽");  
10.    });  
11.    $(".div_xiaozi").mouseout(function(){  
12.        alert("鼠标从DIV上走出来喽");  
13.    });  
14.}); 
    $(document).ready(function(){
        $(".a_xiaozi").mouseout(function(){
            alert("鼠标从超链接上走出来喽");
        });
        $(".span_xiaozi").mouseout(function(){
            alert("鼠标从SPAN上走出来喽");
        });
        $(".p_xiaozi").mouseout(function(){
            alert("鼠标从P上走出来喽");
        });
        $(".div_xiaozi").mouseout(function(){
            alert("鼠标从DIV上走出来喽");
        });
    });
你会发现，当你的鼠标从<a><span><p>标签上面出来的时候在最后都会alert，说明事件一次从内向外冒泡。
不过.hover()方法能够聪明地处理这些冒泡问题(指mouseout(),mouseover()这两个方法导致的冒泡问题),当我们使用该方法添加事件时，可以不必考虑由于错误的元素取得mouseout或mouseover事件而导致的问题。这就使得.hover()成为绑定个别鼠标事件的一种有吸引力的替代方案。
那么我们怎么阻止事件冒泡呢？
其实导致这个问题的根本原因就是冒泡，把本应该在正确元素上面发生的事件又传递给外层DOM，让外层DOM也去响应这个事件。
所以我们应该访问“事件对象”。
事件对象是一种JS结构，它会在元素获得处理事件的机会时被传递给相应的事件处理程序。这个对象中包含着与事件有关的信息(例如事件发生时的鼠标指针位置)，也提供了可以用来影响事件在DOM中传递进程的一些方法。
为了在处理程序中使用事件对象，需要为函数添加一个参数：event
 
view plaincopy to clipboardprint?
01.$(document).ready(function(){  
02.    $(".p_xiaozi").mouseout(function(event){  
03.        alert("鼠标从P上走出来喽");  
04.    });  
05.}); 
$(document).ready(function(){
    $(".p_xiaozi").mouseout(function(event){
        alert("鼠标从P上走出来喽");
    });
});
事件处理程序中的变量event保存着事件对象，而event.target属性保存着发生事件的目标元素(也就是真正应该对事件做出响应的DOM元素)
虽然这个event.target是DOM API中规定的，不过IE并没有实现哦。IE把事件对象保存在了全局属性window.event中，而事件目标则可以通过window.event.srcElement属性访问到
但是jQuery中则不用考虑这些差别，因为其对这些进行了必要的扩展，从而晨任何浏览器中都能够使用这个属性(event.target)
view plaincopy to clipboardprint?
01.$(document).ready(function(){  
02.        $(".p_xiaozi").mouseout(function(event){  
03.            if(event.target == this)  
04.            {  
05.                alert("鼠标从P上走出来喽");  
06.            }  
07.        });  
08.    }); 
$(document).ready(function(){
        $(".p_xiaozi").mouseout(function(event){
            if(event.target == this)
            {
                alert("鼠标从P上走出来喽");
            }
        });
    });
 
这样就能保证鼠标移出<a>标签的时候只alert(“鼠标从超链接上走出来喽”);而不会把这个事件(mouseout)传递到外层DOM标签中去。
是不是只有这一种方法解决事件冒泡带来的问题？不！还有一种方法，那就是“停止事件传播”。
 
事件对象还提供一个.stopPropagation()方法，可以完全阻止事件冒泡。与.target类似，这个方法也是一种纯JS特性，但是在跨浏览器环境中则无法安全的使用(即在IE中停止冒泡应该使用事件对象的cancelBubble属性设置为false)，不过通过jQuery来注册所有的事件处理程序，就可以放心地使用这个方法。
view plaincopy to clipboardprint?
01.$(document).ready(function(){  
02.    $(".p_xiaozi").mouseout(function(event){  
03.         alert("鼠标从P上走出来喽");  
04.         event.stopPropagation();  
05.    });  
06.}); 
$(document).ready(function(){
    $(".p_xiaozi").mouseout(function(event){
         alert("鼠标从P上走出来喽");
         event.stopPropagation();
    });
});
既然说了这么多，那么也不在乎在来点内容了，那就是阻止事件的默认操作。
什么是默认操作？举个最简单的例子就可以说明白了，点击<a>标签就会将浏览器引向一个新的链接。点击submit标签，就会提交表单。
那么怎么阻止这些默认操作呢？我用的最简单的方法就是return false;
 
如果我们不希望执行这种默认操作，那么在事件对象上调用.stopPropagation()方法也无济于事,因为默认操作不是在正常的事件传播流中发生的。在这种情况下,.preventDefault()办法则可以在触发默认操作之前终止事件。(在IE中要想预防默认操作发生，需要将事件对象的returnValue属性设置false)
 事件传播和默认操作是相互独立的两套机制，在二者任何一方发生时，都可以终止另一方，如果想要同时停止事件传播和默认操作，可以在事件处理程序中返回false，这是对在事件对象上同时调用.stopPropagation()和.preventDefault()的一种简写方式。。。
 
原文来自CSDN博客：http://blog.csdn.net/xinem/archive/2010/02/22/5317850.aspx