今日，項目程式出現異常，後發現跟冒泡事件有關，利用此機會探索一下利用Javascript捕獲和冒泡事件。
一、要探究捕獲和冒泡事件，首先要知道什麼是事件的捕獲和冒泡，是以呢，先從概念入手；
事件的冒泡：在一個對象上觸發某類事件（比如單擊onclick事件），如果此對象定義了此事件的處理程式，那麼此事件就會調用這個處理程式，如果沒有定義此事件處理程式或者事件傳回true，那麼這個事件會向這個對象的父級對象傳播，從裡到外，直至它被處理（父級對象所有同類事件都将被激活），或者它到達了對象層次的最頂層，即document對象（有些浏覽器是window）。
其實事件冒泡是一個從後代節點向祖先節點冒泡的過程，而捕獲是從祖先節點到後節點的過程。
我為了友善了解，則用先捕獲，後冒泡，捕獲從上到下，冒泡從下到上來記憶。我記得從哪兒看到的，有人把捕獲比喻為石頭沉入海底，而把冒泡比喻為氣泡冒出水面。當然了，捕獲的深度取決于你的DOM布局，海底就有點深了哈，^_^
注意：IE6、IE7、IE8隻支援冒泡流，不支援捕獲流。
二、為什麼要阻止冒泡事件
也許會有人問：為什麼要阻止冒泡事件呢？阻止冒泡事件有什麼用處呢？
下面我們就來說下為什麼要阻止冒泡事件：
先舉個例子吧，如下代碼：
<html>
<div id='div_1' οnclick="alert('I'm First!')">
<div id='div_2' οnclick="alert('I'm Second!')">
<a id="alink" οnclick="alert('I'm Third!')" href="http://blog.csdn.net/joyksk" target="_blank" rel="external nofollow" >Click Here</a>
</div>
</div>
</html>
從上面的代碼可以看出，div_1是div_2的容器，而div_2是a的容器，總共三層。
我們運作這個執行個體，點選Click Here會發現，分别彈出了三個alert提示框，而且順序為I'm Third! 、I'm Second!、I'm First!，這就符合我們上面提到的冒泡的概念了。
而我這次碰到的問題就是這樣，我稱之為“事件重疊”。
出現這種情況，肯定不行，是以我們要阻止該事件冒泡的發生，那如何來阻止呢？下面将。
三、阻止事件冒泡的方法
首先我先給出一個純JavaScript版的寫法：
function aOnClick(e){
window.event? window.event.cancelBubble = true : e.stopPropagation();
}
解釋：因為IE裡的阻止冒泡的寫法為window.event.cancelBubble = true，其他浏覽器為e.stopPropagation();;是以這裡做了相容。
再給出一個jQuery版本的寫法：
$(function() {
$("#alink").click(function(event) {
event.stopPropagation();
});
});
四、阻止冒泡的其他方法及不同
我就是用上面的函數阻止了冒泡，但是還有其他的方法可以達到類似的效果，但還是有所不同；
$("#alink").click(function(event) {
return false;
});
解釋：上面方法使用jQuery對alink進行了操作，經過測試，得出結論，該函數阻止了冒泡，但是它将a的預設行為也屏蔽掉了(此處為href屬性)。這就是不同之處。
順便說下，javasccript的阻止預設行為的方法
event.preventDefault();
從上面可以看出，return false;是event.stopPropagation();和PreventDefault()的并集。
就到這裡吧！
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)