JavaScript捕捉事件和阻止冒泡事件實例分析
本文實例講述了JavaScript捕捉事件和阻止冒泡事件。分享給大家供大家參考，具體如下：
今日，項目程序出現(xiàn)異常，后發(fā)現(xiàn)跟冒泡事件有關(guān)，利用此機會探索一下利用Javascript捕獲和冒泡事件。
一、要探究捕獲和冒泡事件，首先要知道什么是事件的捕獲和冒泡，所以呢，先從概念入手；
事件的冒泡：在一個對象上觸發(fā)某類事件（比如單擊onclick事件），如果此對象定義了此事件的處理程序，那么此事件就會調(diào)用這個處理程序，如果沒有定義此事件處理程序或者事件返回true，那么這個事件會向這個對象的父級對象傳播，從里到外，直至它被處理（父級對象所有同類事件都將被激活），或者它到達了對象層次的最頂層，即document對象（有些瀏覽器是window）。
其實事件冒泡是一個從后代節(jié)點向祖先節(jié)點冒泡的過程，而捕獲是從祖先節(jié)點到后節(jié)點的過程。
我為了方便理解，則用先捕獲，后冒泡，捕獲從上到下，冒泡從下到上來記憶。我記得從哪兒看到的，有人把捕獲比喻為石頭沉入海底，而把冒泡比喻為氣泡冒出水面。當然了，捕獲的深度取決于你的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!')" rel="external nofollow" >Click Here</a>
</div>
</div>
</html>
從上面的代碼可以看出，div_1是div_2的容器，而div_2是a的容器，總共三層。
我們運行這個實例，點擊Click Here會發(fā)現(xiàn)，分別彈出了三個alert提示框，而且順序為I'm Third! 、I'm Second!、I'm First!，這就符合我們上面提到的冒泡的概念了。
而我這次碰到的問題就是這樣，我稱之為“事件重疊”。
出現(xiàn)這種情況，肯定不行，所以我們要阻止該事件冒泡的發(fā)生，那如何來阻止呢？下面將。
三、阻止事件冒泡的方法
首先我先給出一個純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();
});
});
四、阻止冒泡的其他方法及不同
我就是用上面的函數(shù)阻止了冒泡，但是還有其他的方法可以達到類似的效果，但還是有所不同；
$("#alink").click(function(event) {
return false;
});
解釋：上面方法使用jQuery對alink進行了操作，經(jīng)過測試，得出結(jié)論，該函數(shù)阻止了冒泡，但是它將a的默認行為也屏蔽掉了(此處為href屬性)。這就是不同之處。
順便說下，javasccript的阻止默認行為的方法
event.preventDefault();
從上面可以看出，return false;是event.stopPropagation();和PreventDefault()的并集。
就到這里吧！
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要為大家詳細介紹了js實現(xiàn)彈窗效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要介紹了js圖片查看器插件用法,結(jié)合實例形式分析了圖片查看器插件viewer.js簡單使用技巧,需要的朋友可以參考下2019-06-06
3級省地市級聯(lián)菜單，ie/ff 測試通過，支持多個并存，支持事件2010-02-02
這篇文章主要為大家詳細介紹了BootStrap TreeView使用實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
今天一同學對我說“好吧,我準備去學習”,我大驚,這老勾引我打dota的也去學習,于是我好奇他學什么,他說要搞一個選項卡切換js2011-09-09
js 自制滾動條的小例子，需要的朋友可以參考一下2013-03-03
這篇文章主要為大家介紹了HTTP?302?redirect應(yīng)用及作用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12
本文為大家介紹下使用javascript實現(xiàn)簡單的Map，可以對map進行獲取、判斷、刪除、增加等等，感興趣的朋友可以了解下2013-12-12
Bootstrap中datetimepicker使用小結(jié)
這篇文章主要為大家詳細介紹了Bootstrap中datetimepicker的使用方法，一款功能強大的日期選擇控件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)輪播圖特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-04-04