DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript事件模型實例分析
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程序設計有所幫助。

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