Javascript中的事件

      Javascript事件的重要性不用多说，但是各种浏览器处理事件的方法可能出现很大差别，这大大阻碍了撰写js事件代码的效率，下面是一个通用的js事件基础库，它统一了js事件的使用，大大提高了撰写效率。

这段代码是《Javascript高级程序设计》第九章所总结的，我修改了一些地方并且调试正确，并且已经在自己的项目中使用。

var oEventUtil = new Object();

oEventUtil.addEventHandler = function(oTarget,sEventType,fnHandler){//sEventType is a type without 'on'
    if(oTarget.addEventListener){
        oTarget.addEventListener(sEventType,fnHandler,false);
    }else if(oTarget.attachEvent){
        oTarget.attachEvent("on"+sEventType,fnHandler);
    }else{
        oTarget["on"+sEventType] = fnHandler;
    }
}

oEventUtil.removeEventHandler = function(oTarget,sEventType,fnHandler){//sEventType is a type without 'on'
    if(oTarget.removeEventListener){
        oTarget.removeEventListener(sEventType,fnHandler,false);
    }else if(oTarget.detachEvent){
        oTarget.detachEvent("on"+sEventType,fnHandler);
    }else{
        oTarget["on"+sEventType] = null;
    }
}

oEventUtil.formatEvent = function(oEvent){
    if(isIE && isWin){
        if(oEvent.type == 'keypress'){
            oEvent.charCode = oEvent.keyCode;
            oEvent.keyCode = 0;
        }
        if(oEvent.type == 'keydown' || oEvent.type == 'keyup'){
            oEvent.charCode = 0;
        }
        oEvent.eventPhase = 2;
        oEvent.isChar = (oEvent.charCode > 0);
        oEvent.pageX = oEvent.clientX + document.body.scrollLeft - document.body.clientLeft;
        oEvent.pageY = oEvent.clientY + document.body.scrollTop - document.body.clientTop;
        
        if(oEvent.type == 'mouseout'){
            oEvent.relatedTarget = oEvent.toElement;
        }else if(oEvent.type == 'mouseover'){
            oEvent.relatedTarget = oEvent.fromElement;
        }
        
        oEvent.preventDefault = function(){
            oEvent.returnValue = false;
        }
        
        oEvent.stopPropagation = function(){
            oEvent.cancelBubble = true;
        };
        
        oEvent.target = oEvent.srcElement;
        oEvent.time = (new Date()).getTime();
    }

    return oEvent;
}

oEventUtil.getEvent = function(){
    if(window.event)
        return this.formatEvent(window.event);
    else
        return this.formatEvent(oEventUtil.getEvent.caller.arguments[0]);
}

这段代码由4个function组成：addEventHandler、removeEventHandler、formatEvent、getEvent。

addEventHandler是给指定对象的某种事件添加响应函数，其参数oTarget,sEventType,fnHandler分别为需要关联的对象、事件的类型、处理函数的指针。事件类型这个参数是String类型，比如对document的click事件添加处理函数，则这个事件类型参数应该为"click"（注意：不是"onclick"）。

这种添加事件的方法可以为一个对象的一种事件添加多个处理函数，如果用以下方法，则只能添加一个处理函数。

document.onclick = docClick;
function docClick(){//};

     removeEventHandler所传递的参数是一样的，目的是移除相应的处理函数。

     formatEvent是用来格式化event对象的，因为ie和别的浏览器的事件对象很不一样，这里将ie的事件对象格式化为和DOM一样的对象。isIE和isWin这两个布尔值是利用了之前的一个判断浏览器和操作系统的js库，如果不想依赖那个库的话，可以添加如下代码到最前端：

var isIE = !!(window.attachEvent && !window.opera);
var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");

接下来的代码我改动了不少，首先对键盘事件进行格式化。不论在什么浏览器，键盘事件都分为keydown、keypress、keyup，keypress是键盘按下并且产生字符的事件。然后是处理鼠标事件，将fromElement和toElement都归结到relatedTarget来。然后是取消浏览器默认事件的方法（preventDefault），接下来是停止事件冒泡的方法（stopPropagation）。

     getEvent是取得事件对象的方法，ie中可直接访问window.event对象获得。在其他浏览器中，这个对象是通过处理函数的参数隐蔽的传入的，这时可以通过访问getEvent的调用函数的参数来获得，所以就有了oEventUtil.getEvent.caller.arguments[0]这一句。

       怎么使用这个js库呢？很简单，看了如下例子就明白了！

 

oEventUtil.addEventHandler(document,"keydown",docKeyDown);
function docKeyDown(){
    var oEvent = oEventUtil.getEvent();
    alert('eventType:' + oEvent.type);
}

首先通过统一的方法获得事件对象var oEvent = oEventUtil.getEvent();
然后就可以通过oEvent来访问各种事件属性了，在各种浏览器上都是通过一样的方法访问的哦！^_^