JQuery事件冒泡机制与解决。
当页面上发生一个事件时，每个层次上的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