JavaScript——DOM Level0和DOM Level2事件模型

標籤：瀏覽器   javascript   dom   對象   

事件處理是JavaScropt中近幾年變化最大的部分，也是現有瀏覽器中仍然存在差異的主要方面之一。為了開發出能夠跨瀏覽器安全色的事件處理常式，我們在編寫程式時需要注意一些細節。

【DOM Level0】：又稱傳統事件處理——通過對象屬性將一個函數值指定為事件處理常式的做法。任何對象只允許指定一個事件處理常式。DOM Level0時間分成兩種陣營：NetScape(Firefox,Mozilla,Opera,Safari)和IE陣營，為了獲得這兩種類型瀏覽器都能相容的網頁時，需要注意以下對象以及對應的幾個屬性。

*Event對象——可以用來提供Event相關資訊的屬性

IE中將Event視作window對象屬性，NetScape直接看做Event對象；用三元運算子來判斷某個Event對象nsEvent是否已定義。

處理瀏覽器安全色方法：var theEvent=nsEvent ? nsEvent : window.event;

*Event的fromElement和relatedTarget屬性（分別屬於IE和Firefox）——通過滑鼠事件擷取滑鼠從哪個對象移開（類似的還有aretoElement和currentTarget屬性，用來擷取滑鼠移動到哪個對象）

處理瀏覽器安全色方法：var oldElement=theEvent.fromElement ? theEvent.fromElement : theEvent.relatedTarget;

*IE中的srcElement和Mozilla瀏覽器中的target屬性——用來表示接收時間的對象

處理瀏覽器安全色方法：var theSrc=theEvent.target ? theEvent.target : theEvent.srcElement;

*IE中的cancelBubble和Mozilla之類的stopPropagation——則用於處理事件冒泡操作的關於瀏覽器安全色性的屬性

處理瀏覽器安全色方法：fiunction stopEvent(theEvent)

{

if(theEvent.stopPropagation)

{

theEvent.stopPropagation();

}

else

{

theEvent.cancelBubble=true;

}

}

【DOM Level2】與老事件模型DOM Level0的主要區別在：1.新模型不依賴於特定的事件處理常式屬性。2.可以對任何對象的任何一種事件註冊多個事件處理常式函數。這裡處理瀏覽器安全色性問題的主要來自：Mozilla之類的瀏覽器支援的三種對象方法：addEventListener,removeEventListener和dispatchEvent與IE瀏覽器支援的對象方法：attachEvent和detachEvent之間的區別。

*Mozilla類瀏覽器中添加一個事件監聽器,其他類似

object.addEventListener("event",eventFunction,boolean);

參數一：click和load之類事件；參數二：指定的事件處理常式函數；參數三：指定事件捕獲模型(true)和冒泡模型(false)。

*IE瀏覽器中添加一個事件監聽器：

object.attachEvent("eventhandler",function);

參數一：事件處理常式；參數二：函數。

為了相容上述的差異的處理方法：

function setup(theEvent)

{

var evtObject=document.getElementById("clickme");

if(evtObject.addEventListener){                                         //測試物件模型

evtObject.addEventListener("click",clickme,false);} 

else if(evtObject.attachEvent){

evtObject.attachEvent("onclick",clickme);}

else if(evtObject.onclick){

evtObject.onclick=clickme;}

}

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

JavaScript——DOM Level0和DOM Level2事件模型