JS事件——禁止事件冒泡和禁止默認事件

Event 對象
Event 對象表明事件的狀態,好比事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。
事件一般與函數結合使用,函數不會在事件發生前被執行!

1、什麼是事件冒泡

在一個對象上觸發某類事件(好比單擊onclick事件),若是此對象定義了此事件的處理程序,那麼此事件就會調用這個處理程序,若是沒有定義此事件處理程序或者事件返回true,那麼這個事件會向這個對象的父級對象傳播,即事件由子元素向祖先元素傳播,從裏到外,直至它被處理(父級對象全部同類事件都將被激活),或者它到達了對象層次的最頂層,即document對象(有些瀏覽器是window)。

2、事件冒泡有什麼做用

(1)事件冒泡容許多個操做被集中處理(把事件處理器添加到一個父級元素上,避免把事件處理器添加到多個子級元素上),它還可讓你在對象層的不一樣級別捕獲事件。
(2)讓不一樣的對象同時捕獲同一事件,並調用本身的專屬處理程序作本身的事情,就像老闆一下命令,各自員工作本身崗位上的工做去了。

3、須要注意什麼

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

●不是全部的事件都能冒泡。如下事件不冒泡:blur、focus、load、unload。

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

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

●阻止冒泡並不能阻止對象默認行爲。好比submit按鈕被點擊後會提交表單數據,這種行爲無須咱們寫程序定製。


一、禁止事件冒泡
function stopBubble(e) { 
//若是提供了事件對象,則這是一個非IE瀏覽器 
if ( e && e.stopPropagation ) 
    //所以它支持W3C的stopPropagation()方法 
    e.stopPropagation(); 
else
    //不然,咱們須要使用IE的方式來取消事件冒泡 
    window.event.cancelBubble = true; 
}

二、禁止默認事件
//阻止瀏覽器的默認行爲 
function stopDefault( e ) { 
    //阻止默認瀏覽器動做(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函數器默認動做的方式 
    else
        window.event.returnValue = false; 
    return false; 
}chrome

相關文章
相關標籤/搜索