JavaScript捕捉事件和阻止冒泡事件實(shí)例分析
本文實(shí)例講述了JavaScript捕捉事件和阻止冒泡事件。分享給大家供大家參考，具體如下：
今日，項(xiàng)目程序出現(xiàn)異常，后發(fā)現(xiàn)跟冒泡事件有關(guān)，利用此機(jī)會(huì)探索一下利用Javascript捕獲和冒泡事件。
一、要探究捕獲和冒泡事件，首先要知道什么是事件的捕獲和冒泡，所以呢，先從概念入手；
事件的冒泡：在一個(gè)對(duì)象上觸發(fā)某類事件（比如單擊onclick事件），如果此對(duì)象定義了此事件的處理程序，那么此事件就會(huì)調(diào)用這個(gè)處理程序，如果沒有定義此事件處理程序或者事件返回true，那么這個(gè)事件會(huì)向這個(gè)對(duì)象的父級(jí)對(duì)象傳播，從里到外，直至它被處理（父級(jí)對(duì)象所有同類事件都將被激活），或者它到達(dá)了對(duì)象層次的最頂層，即document對(duì)象（有些瀏覽器是window）。
其實(shí)事件冒泡是一個(gè)從后代節(jié)點(diǎn)向祖先節(jié)點(diǎn)冒泡的過程，而捕獲是從祖先節(jié)點(diǎn)到后節(jié)點(diǎn)的過程。
我為了方便理解，則用先捕獲，后冒泡，捕獲從上到下，冒泡從下到上來記憶。我記得從哪兒看到的，有人把捕獲比喻為石頭沉入海底，而把冒泡比喻為氣泡冒出水面。當(dāng)然了，捕獲的深度取決于你的DOM布局，海底就有點(diǎn)深了哈，^_^
注意：IE6、IE7、IE8只支持冒泡流，不支持捕獲流。
二、為什么要阻止冒泡事件
也許會(huì)有人問：為什么要阻止冒泡事件呢？阻止冒泡事件有什么用處呢？
下面我們就來說下為什么要阻止冒泡事件：
先舉個(gè)例子吧，如下代碼：
<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的容器，總共三層。
我們運(yùn)行這個(gè)實(shí)例，點(diǎn)擊Click Here會(huì)發(fā)現(xiàn)，分別彈出了三個(gè)alert提示框，而且順序?yàn)?span style="color: #0000ff">I'm Third! 、I'm Second!、I'm First!，這就符合我們上面提到的冒泡的概念了。
而我這次碰到的問題就是這樣，我稱之為“事件重疊”。
出現(xiàn)這種情況，肯定不行，所以我們要阻止該事件冒泡的發(fā)生，那如何來阻止呢？下面將。
三、阻止事件冒泡的方法
首先我先給出一個(gè)純JavaScript版的寫法：
function aOnClick(e){
window.event? window.event.cancelBubble = true : e.stopPropagation();
}
解釋：因?yàn)镮E里的阻止冒泡的寫法為window.event.cancelBubble = true，其他瀏覽器為e.stopPropagation();所以這里做了兼容。
再給出一個(gè)jQuery版本的寫法：
$(function() {
$("#alink").click(function(event) {
event.stopPropagation();
});
});
四、阻止冒泡的其他方法及不同
我就是用上面的函數(shù)阻止了冒泡，但是還有其他的方法可以達(dá)到類似的效果，但還是有所不同；
$("#alink").click(function(event) {
return false;
});
解釋：上面方法使用jQuery對(duì)alink進(jìn)行了操作，經(jīng)過測(cè)試，得出結(jié)論，該函數(shù)阻止了冒泡，但是它將a的默認(rèn)行為也屏蔽掉了(此處為href屬性)。這就是不同之處。
順便說下，javasccript的阻止默認(rèn)行為的方法
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錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
移動(dòng)端JS實(shí)現(xiàn)拖拽兩種方法解析
這篇文章主要介紹了移動(dòng)端JS實(shí)現(xiàn)拖拽兩種方法解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
JS實(shí)現(xiàn)多物體緩沖運(yùn)動(dòng)實(shí)例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)多物體緩沖運(yùn)動(dòng)實(shí)例代碼，有需要的朋友可以參考一下2013-11-11
js禁止document element對(duì)象選中文本實(shí)現(xiàn)代碼
禁止document element對(duì)象選中文本在某在情況下還是很有必要的接下來本文將使用js實(shí)現(xiàn)，感興趣的各位可以參考下哈2013-03-03
JS構(gòu)造函數(shù)與原型prototype的區(qū)別介紹
下面小編就為大家?guī)硪黄狫S構(gòu)造函數(shù)與原型prototype的區(qū)別介紹。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
讓iframe子窗體取父窗體地址欄參數(shù)(querystring)
突然用到，記錄一下，對(duì)地址欄字符串用正則處理最好，有時(shí)間研究一下。 主要是思路。2009-10-10
在web頁面中，我們經(jīng)常需要通過修改樣式（style）來達(dá)到更好的用戶體驗(yàn)，需要的朋友可以參考下。2010-10-10
在項(xiàng)目中經(jīng)常會(huì)用到動(dòng)態(tài)加載js,下面這篇文章主要給大家介紹了關(guān)于js腳本加載失敗問題的解決辦法,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-06-06
JS生態(tài)系統(tǒng)加速探索Draft-js?emoji插件功能及使用探索
這篇文章主要介紹了JS生態(tài)系統(tǒng)加速探索Draft-js?emoji插件功能使用探究,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01
webuploader實(shí)現(xiàn)上傳圖片到服務(wù)器功能
這篇文章主要為大家詳細(xì)介紹了webuploader實(shí)現(xiàn)上傳圖片到服務(wù)器功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
JavaScript中textRange對(duì)象使用方法小結(jié)
這篇文章主要介紹了JavaScript中textRange對(duì)象使用方法小結(jié),需要的朋友可以參考下2015-03-03