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