純JavaScript實現(xiàn)的兼容各瀏覽器的添加和移除事件封裝
更新時間:2015年03月28日 10:41:58 投稿:junjie
這篇文章主要介紹了純JavaScript實現(xiàn)的兼容各瀏覽器的添加和移除事件封裝,本文直接給出實現(xiàn)代碼,代碼中帶詳細注釋,需要的朋友可以參考下
//事件處理兼容各種瀏覽器,采用能力檢測方法,所謂能力檢測,就是有能力就做,沒有能力就不做
//定義一個處理事件的對象,兼容各種瀏覽器,dom2級事件處理和ie事件,如果這兩個事件都不兼容,就采用dom0級處理
var eventUtil ={
addEvent:function(element,type,handler){
if (element.addEventListener) {
//非IE瀏覽器采用dom2級事件處理,type為事件類型如:click,handler為事件處理函數,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為事件處理函數,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){
//阻止默認的事件行為
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},
stopProPagation:function(event){
//停止事件冒泡
if(event.stopProPagation){
event.stopProPagation();
}else{
event.cancelBubble = true;
}
}
}
相關文章
JavaScript鼠標拖動事件監(jiān)聽使用方法以及實例效果演示
最近工作中遇到了鼠標拖動事件監(jiān)聽的相關需求,所以下面這篇文章主要給大家介紹了關于JavaScript鼠標拖動事件監(jiān)聽使用方法以及實例效果演示的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05

