javascript阻止默認(rèn)事件和事件冒泡行為

在用Javascript 的時(shí)候我們經(jīng)常會(huì)用到比如給 a 標(biāo)記加上一個(gè)onclick事件，這時(shí)如果點(diǎn)a標(biāo)記的時(shí)候是會(huì)先執(zhí)行事件，然后再執(zhí)行默認(rèn)的a本身事件的。

當(dāng)按鍵后,不希望按鍵繼續(xù)傳遞給如HTML文本框?qū)ο髸r(shí),可以取消返回值.即停止默認(rèn)事件默認(rèn)行為.

一、什么是事件冒泡

在一個(gè)對(duì)象上觸發(fā)某類事件（比如單擊onclick事件），如果此對(duì)象定義了此事件的處理程序，那么此事件就會(huì)調(diào)用這個(gè)處理程序，如果沒有定義此事件處理程序或者事件返回true，那么這個(gè)事件會(huì)向這個(gè)對(duì)象的父級(jí)對(duì)象傳播，從里到外，直至它被處理（父級(jí)對(duì)象所有同類事件都將被激活），或者它到達(dá)了對(duì)象層次的最頂層，即document對(duì)象（有些瀏覽器是window）。

打個(gè)比方說：你在地方法院要上訴一件案子，如果地方?jīng)]有處理此類案件的法院，地方相關(guān)部門會(huì)幫你繼續(xù)往上級(jí)法院上訴，比如從市級(jí)到省級(jí)，直至到中央法院，最終使你的案件得以處理。

二、事件冒泡有什么作用

（1）事件冒泡允許多個(gè)操作被集中處理（把事件處理器添加到一個(gè)父級(jí)元素上，避免把事件處理器添加到多個(gè)子級(jí)元素上），它還可以讓你在對(duì)象層的不同級(jí)別捕獲事件。

【集中處理例子】

<div onclick="eventHandle(event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//本例子只在外面盒子定義了處理方法，而這個(gè)方法一樣可以捕獲到子元素點(diǎn)擊行為并處理它。假設(shè)有成千上萬子元素要處理，難道我們要為每個(gè)元素加“onclick="eventHandle(event)"”？顯然沒有這種集中處理的方法來的簡單，同時(shí)它的性能也是更高的。
function eventHandle(e)
{
    var e=e||window.event;
    var obj=e.target||e.srcElement;
    alert(obj.id+' was click')
}
</script>

（2）讓不同的對(duì)象同時(shí)捕獲同一事件，并調(diào)用自己的專屬處理程序做自己的事情，就像老板一下命令，各自員工做自己崗位上的工作去了。

【同時(shí)捕獲同一事件例子】

<div onclick="outSideWork()" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="inSideWork()" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
function outSideWork()
{
    alert('My name is outSide,I was working...');
}

function inSideWork()
{
    alert('My name is inSide,I was working...');
}

//因?yàn)橄旅娉绦蜃詣?dòng)激活單擊事件，有些瀏覽器不允許，所以請(qǐng)單擊灰色盒子，從這里開始下命令，這樣因?yàn)槊芭莸脑�因，黑色大盒子也�?huì)收到單擊事件，并調(diào)用了自己的處理程序。如果還有更多盒子嵌套，一樣道理。
/*
function bossOrder()
{
    document.getElmentById('inSide').click();
}
bossOrder();
*/
</script>

三、需要注意什么

●事件捕獲其實(shí)有三種方式，事件冒泡只是其中的一種：（1）IE從里到外（inside→outside）的冒泡型事件。（2）Netscape4.0從外到里（outside→inside）的捕獲型事件。（3）DOM事件流，先從外到里，再從里到外回到原點(diǎn)（outside→inside→outside）的事件捕獲方法（似乎對(duì)象將觸發(fā)兩次事件處理，這有什么作用？鄙人不懂�。�。

●不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload。

●事件捕獲方式在不同瀏覽器，甚至同種瀏覽器的不同版本中是有所區(qū)別的。如Netscape4.0采用捕獲型事件解決方案，其它多數(shù)瀏覽器則支持冒泡型事件解決方案，另外DOM事件流還支持文本節(jié)點(diǎn)事件冒泡。

●事件捕獲到達(dá)頂層的目標(biāo)在不同瀏覽器或不同瀏覽器版本也是有區(qū)別的。在IE6中HTML是接收事件冒泡的，另外大部分瀏覽器將冒泡延續(xù)到window對(duì)象，即……body→documen→window。

●阻止冒泡并不能阻止對(duì)象默認(rèn)行為。比如submit按鈕被點(diǎn)擊后會(huì)提交表單數(shù)據(jù)，這種行為無須我們寫程序定制。

四、阻止事件冒泡

通常情況下我們都是一步到位，明確自己的事件觸發(fā)源，并不希望瀏覽器自作聰明、漫無目的地去幫我們找合適的事件處理程序，即我們明確最精準(zhǔn)目標(biāo)，這種情況下我們不需要事件冒泡。另外通過對(duì)事件冒泡的理解，我們知道程序?qū)⒆龆噍^多額外的事情，這必然增大程序開銷。還有一個(gè)重要的問題是：事件冒泡處理可能會(huì)激活我們本來不想激活的事件，導(dǎo)致程序錯(cuò)亂，甚至無從下手調(diào)試，這常成為對(duì)事件冒泡不熟悉程序員的棘手問題。所以必要時(shí)，我們要阻止事件冒泡。

【不想激活的事件被激活例子】

<div onclick="openWin('http://www.baidu.com')" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="openWin('http://www.google.com')" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>

<script type="text/javascript">
//本例你實(shí)際希望點(diǎn)擊灰色盒子打開google首頁，而點(diǎn)擊黑色盒子打開baidu首頁，但結(jié)果你點(diǎn)擊灰色盒子的時(shí)候，卻是同時(shí)打開了兩個(gè)網(wǎng)頁。其實(shí)在實(shí)際設(shè)計(jì)中較少遇到此問題，你可能會(huì)想如果我在頁面不同DOM深處安置了不同的按鈕或鏈接，深層處的事件觸發(fā)會(huì)不會(huì)波及頂層的按鈕呢？不會(huì)，因?yàn)榘粹o不能形成嵌套關(guān)系。
function openWin(url)
{
    window.open(url);
}
</script>

下面是本人在網(wǎng)上抄的一個(gè)方法，把這個(gè)方法放在精準(zhǔn)目標(biāo)對(duì)象處理程序結(jié)尾，本事件觸發(fā)處理結(jié)束后，事件將不在進(jìn)行冒泡處理。

【阻止事件冒泡例子】

<div onclick="showMsg(this,event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="showMsg(this,event)" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//阻止事件冒泡后，你點(diǎn)擊灰色盒子，整個(gè)過程只彈一次對(duì)話框了（注意與默認(rèn)情況對(duì)比）
function showMsg(obj,e)
{
    alert(obj.id);
    stopBubble(e)
}

//阻止事件冒泡函數(shù)
function stopBubble(e)
{
    if (e && e.stopPropagation)
        e.stopPropagation()
    else
        window.event.cancelBubble=true
}
</script>