一、前言
學習了JavaScript事件後，個人總結歸納了跨浏覽器事件對象類庫，方便以後使用，現分享給大家。
二、事件對象封裝
將對浏覽器事件對象的操作封裝成eventObject.js方便調用
//跨浏覽器事件對象的操作
var EventUtil = {
//綁定事件處理程序
addHandler : function(element, type, handler){
if(element.addEventListener){//DOM2級事件處理程序
element.addEventListener(type, handler, false);//false表示的是冒泡階段調用事件處理程序
}else if(element.attachEvent){//IE事件處理程序
element.attachEvent('on' + type, handler);
}else {//DOM0級事件處理程序
element['on' + type] = handler;
}
},
//取消綁定的事件處理程序
removeHandler : function(element, type, handler){
if(element.removeEventListener){
element.removeEventListener(type, handler, false);
}else if(element.detachEvent){
element.datachEvent('on' + type, handler);
}else {
element['on' + type] = null;
}
},
//獲取事件對象
getEvent : function(event){
return event || window.event;
},
//獲取目標元素對象
getTarget : function(event){
return event.target || event.srcElement;//event.target表示獲取非IE元素對象，event.srcElement表示獲取IE元素對象
},
//阻止事件的默認行為
preventDefault : function(event){
if(event.preventDefault){//非IE下阻止事件的默認行為
event.preventDefault();
}else {
event.returnValue = false;//IE下阻止事件的默認行為
}
},
//阻止事件的冒泡
stopPropagation : function(event){
if(event.stopPropagation){//非IE下阻止事件冒泡
event.stopPropagation();
}else {
event.cancelBubble = true;//IE下阻止事件冒泡
}
},
//獲取鼠標按下的鍵位
getButton : function(event){
if(document.implementation.hasFeature("MouseEvents", "2.0")){//DOM2中檢測是否有MouseEvents模塊
return event.button;
// var k = event.button;
// switch(k){
// case 0:
// return "0:表示左鍵";
// case 1:
// return "1:表示中鍵";
// case 2:
// return "2:表示右鍵";
// }
//IE6,7,8 左鍵:1,中鍵:4,右鍵:2;
//Chrome,FF,IE9+ 左鍵:0,中鍵:1,右鍵:2;
}else {
switch(event.button){//IE
case 0 :
case 1 :
case 3 :
case 5 :
case 7 :
return 0;//左鍵
case 2 :
case 6 :
return 2;//右鍵
case 4 :
return 1;//中鍵
}
}
},
//鼠標移入移出時獲取相關元素對象
/*event對象的relatedTarget屬性提供了相關元素的信息，這個屬性只對於mouseover和mouseout事件才包含值；
*對於其他事件，這個屬性的值是null。
*IE不支持relatedTarget屬性，但提供了保存著同樣信息的不同屬性。
*在mouseover事件觸發時，IE的fromElement屬性中保存相關元素；
*在mouseout事件觸發時，IE的toElement屬性中保存相關元素。
*/
getRelatedTarget : function(event){
if(event.relatedTarget){
return event.relatedTarget;
}else if(event.toElement){//mouseout事件觸發
return event.toElement;
}else if(event.fromElement){//mouseover事件觸發
return event.fromElement;
}else {
return null;
}
}
};
三、總結
此類庫參考了《JavaScript高級程序設計 第3版》相關內容，如果各位有更好的有關事件對象操作的類庫，希望能分享交流。
JavaScript高級程序設計（第3版）高清完整PDF中文+英文+源碼 下載見 http://www.linuxidc.com/Linux/2014-09/107426.htm
文中有誤導大家的地方，希望大伙海涵並給予指正。如果您覺得文章對您有所幫助，您的留言和推薦將對我是莫大的鼓舞！
如何使用JavaScript書寫遞歸函數 http://www.linuxidc.com/Linux/2015-01/112000.htm
JavaScript核心概念及實踐 高清PDF掃描版 (邱俊濤) http://www.linuxidc.com/Linux/2014-10/108083.htm
理解JavaScript中的事件流 http://www.linuxidc.com/Linux/2014-10/108104.htm