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來訪問各種事件屬性了，在各種瀏覽器上都是通過一樣的方法訪問的哦！^_^