js事件跨瀏覽器解決問題的學習與總結

//定義一個EventUtil對象
var EventUtil = { 
//兼容瀏覽器注冊事件處理程序
addHandler: function(element, type, handler){ 
// 該方法接受3個參數：要操作的元素，事件名稱和事件處理程序函數 
if (element.addEventListener){ //檢查傳入的元素是否存在DOM2級方法 
element.addEventListener(type, handler, false); // 若存在，則使用該方法 
} 
else if (element.attachEvent){ // 如果存在的是IE的方法 
element.attachEvent("on" + type, handler); //則使用IE的方法，注意，這里的事件類型必須加上"on"前綴。 
}
 else { // 最后一種可能是使用DOM0級 
element["on" + type] = hander; 
} 
}, 
//兼容瀏覽器取消事件處理程序
removeHandler: function(element, type, handler){ // 該方法是刪除之前添加的事件處理程序 
if (element.removeEventListener){ //檢查傳入的元素是否存在DOM2級方法 
element.removeEventListener(type, handler, false); // 若存在，則使用該方法 
} 
else if (element.detachEvent){ // 如果存在的是IE的方法 
element.detachEvent("on" + type, handler); //則使用IE的方法，注意，這里的事件類型必須加上"on"前綴。 
}
 else { // 最后一種可能是使用DOM0及方法(在現代瀏覽器中，應該不會執行這里的代碼) 
element["on" + type] = null; 
} 
},
//兼容瀏覽器獲取瀏覽器事件對象的程序
getEvent:function(event) {
	return event?event:window.event;
},
//兼容瀏覽器獲取事件來自哪個元素的程序
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;
	}
}
}
//下面是簡單的使用上面的封裝對象
window.onload=function(){
	var htmlobj = document.documentElement;
	var bodyobj = document.body;
	var alinkobj=document.getElementById('alink');
	 EventUtil.addHandler(bodyobj,'click',function(){alert("我是body元素");});
         EventUtil.addHandler(alinkobj,'click',function(){alert("我是alink元素");});
         EventUtil.addHandler(alinkobj,'click',function(e){e=event||window.event;
			  	alert(EventUtil.getElement(e));});
         EventUtil.addHandler(alinkobj,'click',function(e){e=event||window.event;
			  	alert(e.type);});

         EventUtil.addHandler(alinkobj,'click',function(e){e=event||window.event;
			 	EventUtil.preventDefault(e);

			 });
        EventUtil.addHandler(alinkobj,'click',function(e){e=event||window.event;
			 	  EventUtil.stopPropagation(e);

			 });
		}

（1）DOM中的事件對象      

    常用屬性：

          type：    代表事件的類型

          target：   代表事件的實際目標

      currentTarget：其事件處理程序當前正在處理事件的那個元素。

     重要屬性方法：

            stopPropagation()  阻止事件冒泡

            preventDefault()   阻止事件的默認行為

（2）IE中的事件對象

  常用屬性：  

             type屬性        代表事件的類型

             srcElement屬性  代表獲取事件的實際目標（類似與DOM中的target）

            cancelBubble 屬性  用于阻止事件冒泡，默認值為false,表示不阻止冒泡,true為阻止事件冒泡(與DOM中的 stopPropagation() 方法相同)，

            returnValue屬性  用于阻止默認事件的行為，默認值為true,設置為false就可以取消事件的默認行為（與DOM中的 preventDefault()方法相同）。