本文實例講述了JavaScript捕捉事件和阻止冒泡事件。分享給大家供大家參考，具體如下：
今日，項目程序出現異常，后發現跟冒泡事件有關，利用此機會探索一下利用Javascript捕獲和冒泡事件。
一、要探究捕獲和冒泡事件，首先要知道什么是事件的捕獲和冒泡，所以呢，先從概念入手；
事件的冒泡：在一個對象上觸發某類事件（比如單擊onclick事件），如果此對象定義了此事件的處理程序，那么此事件就會調用這個處理程序，如果沒有定義此事件處理程序或者事件返回true，那么這個事件會向這個對象的父級對象傳播，從里到外，直至它被處理（父級對象所有同類事件都將被激活），或者它到達了對象層次的最頂層，即document對象（有些瀏覽器是window）。
其實事件冒泡是一個從后代節點向祖先節點冒泡的過程，而捕獲是從祖先節點到后節點的過程。
我為了方便理解，則用先捕獲，后冒泡，捕獲從上到下，冒泡從下到上來記憶。我記得從哪兒看到的，有人把捕獲比喻為石頭沉入海底，而把冒泡比喻為氣泡冒出水面。當然了，捕獲的深度取決于你的DOM布局，海底就有點深了哈，^_^
注意：IE6、IE7、IE8只支持冒泡流，不支持捕獲流。
二、為什么要阻止冒泡事件
也許會有人問：為什么要阻止冒泡事件呢？阻止冒泡事件有什么用處呢？
下面我們就來說下為什么要阻止冒泡事件：
先舉個例子吧，如下代碼：
<html> <div id='div_1' onclick="alert('I'm First!')"> <div id='div_2' onclick="alert('I'm Second!')"> <a id="alink" onclick="alert('I'm Third!')" href="http://www.baidu.com" 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()的并集。
就到這里吧！
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
