一、什么是事件冒泡？
当一个事件发生的时候，该事件总是有一个事件源，即引发这个事件的对象，一个事件不能凭空产生，这就是事件的发生。
当事件发生后，这个事件就要开始传播。为什么要传播呢？因为事件源本身并没有处理事件的能力。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身不能处理这个事件（废话），事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件）。
当事件在传播过程中，找到了一个能够处理它的函数，这时候我们就说这个函数捕捉到了这个事件。 说到这里，关键的问题来了，那就是一个函数是如何捕捉一个事件的呢？这就涉及到事件的冒泡了。
为了更好地理解冒泡的概念，我建议你现在想象一下你的面前放着一杯水，但这杯水和我们平时看到的有点点不同，它分为数层，每一层又分成一或多个区域，最顶层是我们熟悉的窗口对象（即window对象），下一层分为好几个区域（document对象、history对象等等），而document对象的下一层又分为多个子对象。 这些对象的层次关系构成了DOM中的对象树。
事件的传播是有方向的，当点击一个按钮时所产生的事件从这个按钮处开始向上传播（就像一个水泡从杯底冒上来，这就是之所以叫事件冒泡的原因），但这个事件总是寻找特定的属性是否有值。例如按钮的click事件先寻找在按钮上是否有onclick属性的有意义的定义（即该属性指向一个存在的函数或一段可执行的语句），如果有，执行这个函数或语句；然后事件继续向上传播，到达按钮的上一层对象（例如一个form对象或document对象，总之是包含了按钮的父对象），如果该对象也定义了onclick属性，则执行属性的值。
在事件捕获的过程中：事件首先会交给最外层的元素，接着再交给更具体的元素。
在事件冒泡中：当事件发生时，会首先发送给最具体的元素，在这个元素获得响应机会之后，事件会向上冒泡至更一般的元素。事件冒泡有时候会产生副作用，导致始料不及的行为。
那么，什么浏览器采用的是“事件捕获”模式，而又有哪些采用的是“事件冒泡”模式呢？
其实，最终出台的DOM标准规定应该同时使用这两种策略：首先，事件要从一般到具体进行捕获，钴，事件再通过冒泡返回DOM树的顶层。而事件处理可以注册到这个过程中的任何一部分。即，可以把事件处理程序注册到事件捕获阶段，也可以注册到事件冒泡阶段。
jQuery为了提供跨浏览器的一致性，它始终会在冒泡阶段注册事件处理程序。因此，我们总可以假定最具体的元素会首先获得响应事件的机会。
二、阻止事件冒泡
<html>
<head>
<title>Porschev---Jquery事件冒泡</title>
<scriptsrc="jquery-1.3.2-vsdoc.js"type="text/javascript"></script>
</head>
<body>
<div id="divOne" οnclick="alert('我是最外层');">
<div id="divTwo" οnclick="alert('我是中间层！')">
<a id="hr_three"href="http://www.baidu.com" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" mce_href="http://www.baidu.com" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" οnclick="alert('我是最里层！')">点击我</a>
</div>
</div>
</body>
</html>
上面这个页面， 分为三层：divOne是第外层，divTwo中间层，hr_three是最里层;
他们都有各自的click事件，最里层a标签还有href属性的默认行为。
运行页面，点击“点击我”,会依次弹出：我是最里层---->我是中间层---->我是最外层---->然后再链接到百度.
这就是事件冒泡，本来我只点击ID为hr_three的标签，但是确执行了三个alert操作。
事件冒泡过程（以标签ID表示）：hr_three---->divTwo---->divOne。从最里层冒泡到最外层。
以下有四种阻止冒泡方法：
1.event.stopPropagation();
<scripttype="text/javascript">
$(function(){
$("#hr_three").click(function(event){
event.stopPropagation();
});
});
<script>
再点击“点击我”，会弹出：我是最里层，然后链接到百度
作用是：事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转）
2.return false;
<pre name="code" class="html"><scripttype="text/javascript">
$(function(){
$("#hr_three").click(function(event){
return false;
});
});
<script>
再点击“点击我”，会弹出：我是最里层，但不会执行链接到百度页面
作用是：事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转）
3.event.preventDefault();
<scripttype="text/javascript">
$(function(){
$("#hr_three").click(function(event){
event.preventDefault();
});
});
<script>
点击“点击我”，会发现它依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转到百度
作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）
4.event.tatget==this
<scripttype="text/javascript">
$(function(){
<pre name="code" class="html"> $("#divOne").click(function(event){
if(event.tatget==this){
//执行
}
});
$("#divTwo").click(function(event){
if(event.tatget==this){
//执行
}
});
$("#hr_three").click(function(event){ if(event.tatget==this){
//执行
} });});<script>
再点击“点击我”，会弹出：我是最里层，然后链接到百度
作用是：事件处理过程中，阻止了事件冒泡，但不会阻击默认行为，event.target属性保存着发生事件的目标元素，只有在真正的目标元素触发事件时才执行操作。
注：一个事件起泡对应触发的是上层的同一事件
特殊：如果two设置成双击事件，那么在你单击two的时候就会起泡触发one单击的事件（双击包含单击）。
![用js实现的一个加载中状态的动态效果[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)