（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()的一种简写方式。。。
