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標準}