一、前言

学习了java script事件后，个人总结归纳了跨浏览器事件对象类库，方便以后使用，现分享给大家。

二、事件对象封装

将对浏览器事件对象的操作封装成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;
? ? ? ? }
? ? }
};

三、总结
此类库参考了《java script高级程序设计 第3版》相关内容，如果各位有更好的有关事件对象操作的类库，希望能分享交流。

文中有误导大家的地方，希望大伙海涵并给予指正。如果您觉得文章对您有所帮助，您的留言和推荐将对我是莫大的鼓舞！

?