快捷導(dǎo)航

javascript事件模型實(shí)例分析

更新時(shí)間：2015年01月30日 11:28:01 作者：冰河winner

這篇文章主要介紹了javascript事件模型用法,實(shí)例分析了事件模型、事件對(duì)象、事件監(jiān)聽器及事件傳遞的定義與使用技巧,需要的朋友可以參考下

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

一、事件模型

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

二、事件對(duì)象

在IE瀏覽器中事件對(duì)象是window的一個(gè)屬性，在DOM標(biāo)準(zhǔn)中，event必須作為唯一的參數(shù)傳給事件處理函數(shù)

獲得兼容的event 對(duì)象：

function(event){ 
  //event 是作為DOM標(biāo)準(zhǔn)的參數(shù)傳入處理函數(shù) 
 event = event ?event : window.event; 
}

在IE中，事件的對(duì)象包含在event的srcElement中，而在DOM標(biāo)準(zhǔn)中，對(duì)象包含在target屬性中
獲得兼容的event 對(duì)象指向的元素：

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

前提是，保證event對(duì)象已經(jīng)正確的獲取

三、事件監(jiān)聽器

IE下，注冊(cè)的監(jiān)聽器逆序執(zhí)行，即后面注冊(cè)的先執(zhí)行

element.attachEvent('onclick',observer); //注冊(cè)監(jiān)聽器
element.detachEvent('onclick',observer) //移除監(jiān)聽器

第一個(gè)參數(shù)為事件名稱，第二個(gè)為回調(diào)處理函數(shù)

DOM標(biāo)準(zhǔn)下：

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

第一個(gè)參數(shù)為事件名稱，沒有“on”的前綴，第二個(gè)參數(shù)為回調(diào)處理函數(shù)，第三個(gè)參數(shù)說明回調(diào)函數(shù)是在捕獲階段調(diào)用還是冒泡階段調(diào)用，默認(rèn)true為捕獲階段

四、事件傳遞

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

function someHandler(event){ 
  event = event || window.event; 
  if(event.stopPropagation) //DOM標(biāo)準(zhǔn) 
  event.stopPropagation(); 
  else 
  event.cancelBubble = true; //IE標(biāo)準(zhǔn) 
}

取消事件傳遞后的默認(rèn)處理

function someHandler(event){ 
  event = event || window.event; 
  if(event.preventDefault) //DOM標(biāo)準(zhǔn) 
  event. preventDefault (); 
  else 
  event.returnValue = true; //IE標(biāo)準(zhǔn) 
}

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: