首頁 > web前端 > js教程 > javascript事件模型、物件、監聽、傳遞程式碼實例詳解

javascript事件模型、物件、監聽、傳遞程式碼實例詳解

伊谢尔伦
發布: 2017-07-22 17:18:09
原創
1607 人瀏覽過

一、事件模型

冒泡型事件(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事件模型、物件、監聽、傳遞程式碼實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板