1. 程式人生 > >JS事件——禁止事件冒泡和禁止預設事件

JS事件——禁止事件冒泡和禁止預設事件

Event 物件
Event 物件代表事件的狀態,比如事件在其中發生的元素、鍵盤按鍵的狀態、滑鼠的位置、滑鼠按鈕的狀態。
事件通常與函式結合使用,函式不會在事件發生前被執行!

一、什麼是事件冒泡

在一個物件上觸發某類事件(比如單擊onclick事件),如果此物件定義了此事件的處理程式,那麼此事件就會呼叫這個處理程式,如果沒有定義此事件處理程式或者事件返回true,那麼這個事件會向這個物件的父級物件傳播,即事件由子元素向祖先元素傳播,從裡到外,直至它被處理(父級物件所有同類事件都將被啟用),或者它到達了物件層次的最頂層,即document物件(有些瀏覽器是window)。

二、事件冒泡有什麼作用

(1)事件冒泡允許多個操作被集中處理(把事件處理器新增到一個父級元素上,避免把事件處理器新增到多個子級元素上),它還可以讓你在物件層的不同級別捕獲事件。
(2)讓不同的物件同時捕獲同一事件,並呼叫自己的專屬處理程式做自己的事情,就像老闆一下命令,各自員工做自己崗位上的工作去了。

三、需要注意什麼

●在我們使用的所有瀏覽器中,都支援事件冒泡 ,即事件由子元素向祖先元素傳播的,就 像氣泡從水底向水面上浮一樣。
而在像firefox,chrome,safari這類所謂的標準瀏覽器中,事件傳播還有個階段,那就是捕獲階段,事實上,捕獲階段是一個和冒泡階段完全相反的過程,即事件由祖先元素向子元素傳播,要說明的是在 IE,opera瀏覽器中,是不存在這個階段的。

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

●事件捕獲方式在不同瀏覽器,甚至同種瀏覽器的不同版本中是有所區別的。如Netscape4.0採用捕獲型事件解決方案,其它多數瀏覽器則支援冒泡型事件解決方案,另外DOM事件流還支援文字節點事件冒泡。

●事件捕獲到達頂層的目標在不同瀏覽器或不同瀏覽器版本也是有區別的。在IE6中HTML是接收事件冒泡的,另外大部分瀏覽器將冒泡延續到window物件,即……body→documen→window。

●阻止冒泡並不能阻止物件預設行為。比如submit按鈕被點選後會提交表單資料,這種行為無須我們寫程式定製。


1、禁止事件冒泡
function stopBubble(e) {
//如果提供了事件物件,則這是一個非IE瀏覽器
if ( e && e.stopPropagation )
    //因此它支援W3C的stopPropagation()方法
    e.stopPropagation();
else
    //否則,我們需要使用IE的方式來取消事件冒泡
    window.event.cancelBubble = true;
}

2、禁止預設事件
//阻止瀏覽器的預設行為
function stopDefault( e ) {
    //阻止預設瀏覽器動作(W3C)
    if ( e && e.preventDefault )
        e.preventDefault();
    //IE中阻止函式器預設動作的方式
    else
        window.event.returnValue = false;
    return false;
}