純JavaScript實(shí)現(xiàn)的兼容各瀏覽器的添加和移除事件封裝
更新時(shí)間:2015年03月28日 10:41:58 投稿:junjie
這篇文章主要介紹了純JavaScript實(shí)現(xiàn)的兼容各瀏覽器的添加和移除事件封裝,本文直接給出實(shí)現(xiàn)代碼,代碼中帶詳細(xì)注釋,需要的朋友可以參考下
//事件處理兼容各種瀏覽器,采用能力檢測(cè)方法,所謂能力檢測(cè),就是有能力就做,沒有能力就不做 //定義一個(gè)處理事件的對(duì)象,兼容各種瀏覽器,dom2級(jí)事件處理和ie事件,如果這兩個(gè)事件都不兼容,就采用dom0級(jí)處理 var eventUtil ={ addEvent:function(element,type,handler){ if (element.addEventListener) { //非IE瀏覽器采用dom2級(jí)事件處理,type為事件類型如:click,handler為事件處理函數(shù),false代表事件采用冒泡處理模型,如果是true代表 采用捕獲型處理模型 //除了netbeans采用捕獲型處理模型,其他都采用冒泡型處理模型 //如果是非IE瀏覽器添加事件為:addEventListener element.addEventListener(type,handler,false); }else if (element.attachEvent) { //如果為IE瀏覽器,添加事件采用 attachEvent element.attachEvent('on'+type,handler); }else{ element['on'+type] = handler; } }, removeEvent:function(element,type,handler){ if (element.removeEventListener) { //非IE瀏覽器采用dom2級(jí)事件處理,type為事件類型如:click,handler為事件處理函數(shù),false代表事件采用冒泡處理模型,如果是true代表 采用捕獲型處理模型 //除了netbeans采用捕獲型處理模型,其他都采用冒泡型處理模型 //如果是非IE瀏覽器添加事件為:removeEventListener element.removeEventListener(type,handler,false); }else if (element.detachEvent) { //如果為IE瀏覽器,添加事件采用 detachEvent element.detachEvent('on'+type,handler); }else{ //dom0級(jí)事件處理,如果刪除事件采用賦值null element['on'+type] = null; } }, getEvent:function(event){ //獲取事件本身 return event?event:window.event; }, getType:function(event){ //獲取事件類型 return event.type; }, getElement:function(event){ //獲取事件作用元素 return event.target || event.srcElement; }, preventDefault:function(event){ //阻止默認(rèn)的事件行為 if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue = false; } }, stopProPagation:function(event){ //停止事件冒泡 if(event.stopProPagation){ event.stopProPagation(); }else{ event.cancelBubble = true; } } }
您可能感興趣的文章:
- JS事件添加和移出的兼容寫法示例
- 兼容各大瀏覽器的JavaScript阻止事件冒泡代碼
- javascript 兼容各個(gè)瀏覽器的事件
- 原生JS綁定滑輪滾動(dòng)事件兼容常見瀏覽器
- javascript瀏覽器兼容教程之事件處理
- JSP中用回車監(jiān)聽按鈕事件兼容火狐 IE等主流瀏覽器
- js鼠標(biāo)滑輪滾動(dòng)事件綁定的簡(jiǎn)單實(shí)例(兼容主流瀏覽器)
- javascript 按鍵事件(兼容各瀏覽器)
- IE8的JavaScript點(diǎn)擊事件(onclick)不兼容的解決方法
- js獲取鍵盤按鍵響應(yīng)事件(兼容各瀏覽器)
- javaScript事件機(jī)制兼容【詳細(xì)整理】
相關(guān)文章
localStorage過期時(shí)間設(shè)置的幾種方法
聊到localStorage想必熟悉前端的朋友都不會(huì)陌生,在實(shí)際的應(yīng)用場(chǎng)景中,我們往往需要讓localStorage設(shè)置的某個(gè)key能在指定時(shí)間內(nèi)自動(dòng)失效,所以基于這種場(chǎng)景,我們?nèi)绾稳ソ鉀Q呢,本文就詳細(xì)的介紹一下2021-12-12JavaScript實(shí)現(xiàn)簡(jiǎn)易計(jì)算器案例
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)易計(jì)算器案例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下<BR>2022-07-07JS Object構(gòu)造函數(shù)之Object.freeze
這篇文章主要介紹了JS Object構(gòu)造函數(shù)之Object.freeze,對(duì)JS感興趣的同學(xué),可以深入了解下2021-04-04JavaScript鼠標(biāo)拖動(dòng)事件監(jiān)聽使用方法以及實(shí)例效果演示
最近工作中遇到了鼠標(biāo)拖動(dòng)事件監(jiān)聽的相關(guān)需求,所以下面這篇文章主要給大家介紹了關(guān)于JavaScript鼠標(biāo)拖動(dòng)事件監(jiān)聽使用方法以及實(shí)例效果演示的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05JavaScript如何借用構(gòu)造函數(shù)繼承
這篇文章主要介紹了JavaScript如何借用構(gòu)造函數(shù)繼承,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11HTML中用JS實(shí)現(xiàn)旋轉(zhuǎn)的圣誕樹
這篇文章介紹了HTML中用JS實(shí)現(xiàn)旋轉(zhuǎn)的圣誕樹,文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-12-12js實(shí)現(xiàn)表單提交后不重新刷新當(dāng)前頁面
本文介紹了如何通過js實(shí)現(xiàn)表單提交后不重新刷新當(dāng)前頁面的方法實(shí)例.既提交了FORM保存了數(shù)據(jù),頁面也不會(huì)跳轉(zhuǎn),很實(shí)用。需要的朋友可以參考下2016-11-11檢測(cè)一個(gè)函數(shù)是否是JavaScript原生函數(shù)的小技巧
這篇文章主要介紹了檢測(cè)一個(gè)函數(shù)是否是JavaScript原生函數(shù)的小技巧,本文給出了兩種檢測(cè)方法,需要的朋友可以參考下2015-03-03