（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事件。 

4.並不一定要使用jQuery才可以阻止事件冒泡，只要獲取到event物件即可使用