欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript事件模型實例分析

 更新時間:2015年01月30日 11:28:01   作者:冰河winner  
這篇文章主要介紹了javascript事件模型用法,實例分析了事件模型、事件對象、事件監(jiān)聽器及事件傳遞的定義與使用技巧,需要的朋友可以參考下

本文實例講述了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)人臉簽到

    這篇文章主要介為大家詳細紹了trackingjs+websocket+百度人臉識別API實現(xiàn)人臉簽到功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-11-11
  • Rxjs?中處理錯誤和抓取錯誤的代碼案例

    Rxjs?中處理錯誤和抓取錯誤的代碼案例

    這篇文章主要介紹了Rxjs?中怎么處理和抓取錯誤,本文,我們學(xué)習(xí)了如何使用?catchError?在數(shù)據(jù)流中抓取錯誤,怎么去修改和返回?observable,或者使用?EMPTY?不去觸發(fā)組件中的錯誤,需要的朋友可以參考下
    2022-08-08
  • JavaScript 事件流、事件處理程序及事件對象總結(jié)

    JavaScript 事件流、事件處理程序及事件對象總結(jié)

    JS與HTML之間的交互通過事件實現(xiàn)。事件就是文檔或瀏覽器窗口中發(fā)生的一些特定的交互瞬間。可以使用監(jiān)聽器(或處理程序)來預(yù)定事件,以便事件發(fā)生時執(zhí)行相應(yīng)的代碼。本文將介紹JS事件相關(guān)的基礎(chǔ)知識。
    2017-04-04
  • Javascript學(xué)習(xí)筆記-詳解in運算符

    Javascript學(xué)習(xí)筆記-詳解in運算符

    in運算符是javascript語言中比較特殊的一個,可以單獨使用作為判斷運算符,也常被用于for...in循環(huán)中遍歷對象屬性
    2011-09-09
  • jqgrid 表格數(shù)據(jù)導(dǎo)出實例

    jqgrid 表格數(shù)據(jù)導(dǎo)出實例

    jqgrid并沒有自帶導(dǎo)出表格數(shù)據(jù)的方法,這里就自己實現(xiàn)了一個,嘗試過在頁面直接將數(shù)據(jù)導(dǎo)出,發(fā)現(xiàn)只有IE下可以通過調(diào)用saveas來實現(xiàn),但是別的瀏覽器不支持,于是考慮將數(shù)據(jù)傳回后臺,然后后臺返回下載文件來實現(xiàn)
    2013-11-11
  • javascript實現(xiàn)圖片左右滾動效果【可自動滾動,有左右按鈕】

    javascript實現(xiàn)圖片左右滾動效果【可自動滾動,有左右按鈕】

    這篇文章主要介紹了javascript實現(xiàn)圖片左右滾動效果,可實現(xiàn)自動滾動,帶有左右按鈕功能,基于插件scrollPic.js實現(xiàn),附帶了相應(yīng)的demo源碼供讀者下載參考,需要的朋友可以參考下
    2016-09-09
  • JavaScript 實現(xiàn)生命游戲

    JavaScript 實現(xiàn)生命游戲

    這篇文章主要介紹了JavaScript 實現(xiàn)生命游戲的示例步驟,幫助大家更好的理解和學(xué)習(xí)使用JavaScript,感興趣的朋友可以了解下
    2021-04-04
  • javascript貪吃蛇游戲設(shè)計與實現(xiàn)

    javascript貪吃蛇游戲設(shè)計與實現(xiàn)

    這篇文章主要為大家詳細介紹了javascript貪吃蛇游戲設(shè)計與實現(xiàn),文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-09-09
  • 詳解處理bootstrap4不支持遠程靜態(tài)框問題

    詳解處理bootstrap4不支持遠程靜態(tài)框問題

    這篇文章主要介紹了詳解處理bootstrap4不支持遠程靜態(tài)框問題,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-07
  • IE與FireFox的JavaScript兼容問題解決辦法

    IE與FireFox的JavaScript兼容問題解決辦法

    本篇文章主要是對IE與FireFox的JavaScript兼容問題解決辦法進行了詳細的分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2013-12-12

最新評論