DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> JS事件——禁止事件冒泡和禁止默認事件
JS事件——禁止事件冒泡和禁止默認事件
編輯:JavaScript基礎知識     

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; 
}

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved