純JavaScript實現(xiàn)的兼容各瀏覽器的添加和移除事件封裝
更新時間:2015年03月28日 10:41:58 投稿:junjie
這篇文章主要介紹了純JavaScript實現(xiàn)的兼容各瀏覽器的添加和移除事件封裝,本文直接給出實現(xiàn)代碼,代碼中帶詳細(xì)注釋,需要的朋友可以參考下
//事件處理兼容各種瀏覽器,采用能力檢測方法,所謂能力檢測,就是有能力就做,沒有能力就不做 //定義一個處理事件的對象,兼容各種瀏覽器,dom2級事件處理和ie事件,如果這兩個事件都不兼容,就采用dom0級處理 var eventUtil ={ addEvent:function(element,type,handler){ if (element.addEventListener) { //非IE瀏覽器采用dom2級事件處理,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級事件處理,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級事件處理,如果刪除事件采用賦值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; } } }
相關(guān)文章
JS Object構(gòu)造函數(shù)之Object.freeze
這篇文章主要介紹了JS Object構(gòu)造函數(shù)之Object.freeze,對JS感興趣的同學(xué),可以深入了解下2021-04-04JavaScript鼠標(biāo)拖動事件監(jiān)聽使用方法以及實例效果演示
最近工作中遇到了鼠標(biāo)拖動事件監(jiān)聽的相關(guān)需求,所以下面這篇文章主要給大家介紹了關(guān)于JavaScript鼠標(biāo)拖動事件監(jiān)聽使用方法以及實例效果演示的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05JavaScript如何借用構(gòu)造函數(shù)繼承
這篇文章主要介紹了JavaScript如何借用構(gòu)造函數(shù)繼承,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-11-11js實現(xiàn)表單提交后不重新刷新當(dāng)前頁面
本文介紹了如何通過js實現(xiàn)表單提交后不重新刷新當(dāng)前頁面的方法實例.既提交了FORM保存了數(shù)據(jù),頁面也不會跳轉(zhuǎn),很實用。需要的朋友可以參考下2016-11-11檢測一個函數(shù)是否是JavaScript原生函數(shù)的小技巧
這篇文章主要介紹了檢測一個函數(shù)是否是JavaScript原生函數(shù)的小技巧,本文給出了兩種檢測方法,需要的朋友可以參考下2015-03-03