javascript事件模型實例分析_javascript技巧

本文實例講述了javascript事件模型的用法。分享給大家供大家參考。具體分析如下：

一、事件模型

冒泡型事件（Bubbling）：事件由葉子節點沿著祖先節點一直向上傳遞到根節點
捕獲型事件（Capturing）：由DOM樹最頂元素一直到最精確的元素，與冒泡型事件相反
DOM標準事件模型：DOM標準既支援冒泡型事件，也支援捕獲型事件，可以說是兩者的結合體，首先是捕獲型，接著冒泡傳遞

二、事件物件

在IE瀏覽器中事件物件是window的屬性，在DOM標準中，event必須作為唯一的參數傳給事件處理函數

取得相容的event 物件：

function(event){ 
  //event 是作为DOM标准的参数传入处理函数 
 event = event ?event : window.event; 
} 

在IE中，事件的物件包含在event的srcElement中，而在DOM標準中，物件包含在target屬性中
取得相容的event 物件指向的元素：

var target =event.srcElement ? event.srcElement : event.target ;

前提是，保證event物件已經正確的取得

三、事件監聽器

IE下，註冊的監聽器逆序執行，即後面註冊的先執行

element.attachEvent('onclick',observer); //注册监听器
element.detachEvent('onclick',observer) //移除监听器

第一個參數為事件名稱，第二個為回呼處理函數

DOM標準下：

element.addEventListener('click',observer,useCapture) 
element.removeEventListener('click',observer,useCapture)

第一個參數為事件名稱，沒有「on」的前綴，第二個參數為回呼處理函數，第三個參數說明回呼函數是在捕獲階段調用還是冒泡階段調用，預設true為捕獲階段

四、事件傳遞

相容地取消瀏覽器的事件傳遞

function someHandler(event){ 
  event = event || window.event; 
  if(event.stopPropagation) //DOM标准 
  event.stopPropagation(); 
  else 
  event.cancelBubble = true; //IE标准 
} 

取消事件傳遞後的預設處理

function someHandler(event){ 
  event = event || window.event; 
  if(event.preventDefault) //DOM标准 
  event. preventDefault (); 
  else 
  event.returnValue = true; //IE标准 
}

希望本文所述對大家的javascript程式設計有所幫助。