javascript事件模型實例分析
本文實例講述了javascript事件模型的用法。分享給大家供大家參考。具體分析如下:
一、事件模型
冒泡型事件(Bubbling):事件由葉子節(jié)點沿祖先節(jié)點一直向上傳遞到根節(jié)點
捕獲型事件(Capturing):由DOM樹最頂元素一直到最精確的元素,與冒泡型事件相反
DOM標準事件模型:DOM標準既支持冒泡型事件,也支持捕獲型事件,可以說是兩者的結(jié)合體,首先是捕獲型,接著冒泡傳遞
二、事件對象
在IE瀏覽器中事件對象是window的一個屬性,在DOM標準中,event必須作為唯一的參數(shù)傳給事件處理函數(shù)
獲得兼容的event 對象:
function(event){ //event 是作為DOM標準的參數(shù)傳入處理函數(shù) event = event ?event : window.event; }
在IE中,事件的對象包含在event的srcElement中,而在DOM標準中,對象包含在target屬性中
獲得兼容的event 對象指向的元素:
var target =event.srcElement ? event.srcElement : event.target ;
前提是,保證event對象已經(jīng)正確的獲取
三、事件監(jiān)聽器
IE下,注冊的監(jiān)聽器逆序執(zhí)行,即后面注冊的先執(zhí)行
element.attachEvent('onclick',observer); //注冊監(jiān)聽器 element.detachEvent('onclick',observer) //移除監(jiān)聽器
第一個參數(shù)為事件名稱,第二個為回調(diào)處理函數(shù)
DOM標準下:
element.addEventListener('click',observer,useCapture) element.removeEventListener('click',observer,useCapture)
第一個參數(shù)為事件名稱,沒有“on”的前綴,第二個參數(shù)為回調(diào)處理函數(shù),第三個參數(shù)說明回調(diào)函數(shù)是在捕獲階段調(diào)用還是冒泡階段調(diào)用,默認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程序設(shè)計有所幫助。
相關(guān)文章
trackingjs+websocket+百度人臉識別API實現(xiàn)人臉簽到
這篇文章主要介為大家詳細紹了trackingjs+websocket+百度人臉識別API實現(xiàn)人臉簽到功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-11-11JavaScript 事件流、事件處理程序及事件對象總結(jié)
JS與HTML之間的交互通過事件實現(xiàn)。事件就是文檔或瀏覽器窗口中發(fā)生的一些特定的交互瞬間。可以使用監(jiān)聽器(或處理程序)來預(yù)定事件,以便事件發(fā)生時執(zhí)行相應(yīng)的代碼。本文將介紹JS事件相關(guān)的基礎(chǔ)知識。2017-04-04Javascript學(xué)習(xí)筆記-詳解in運算符
in運算符是javascript語言中比較特殊的一個,可以單獨使用作為判斷運算符,也常被用于for...in循環(huán)中遍歷對象屬性2011-09-09javascript實現(xiàn)圖片左右滾動效果【可自動滾動,有左右按鈕】
這篇文章主要介紹了javascript實現(xiàn)圖片左右滾動效果,可實現(xiàn)自動滾動,帶有左右按鈕功能,基于插件scrollPic.js實現(xiàn),附帶了相應(yīng)的demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09javascript貪吃蛇游戲設(shè)計與實現(xiàn)
這篇文章主要為大家詳細介紹了javascript貪吃蛇游戲設(shè)計與實現(xiàn),文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-09-09