Object of Event-Professional JavaScript for Web Developer

在Nicholas C.Zakas'《Professional JavaScript for Web Developer》一書中，對於解決event對象兼容性問題進行了概括封裝。

優勢：無需過多考慮不一樣瀏覽器對event對象的差別，統一採用DOM標準調用event對象的方法和屬性

跨平臺的事件

1-建立Eventutil對象（工具包）

var Eventutil=new Object();  //OR var Eventutil={};

2-添加事件處理函數

Eventutil.addEventHandler=function(obj,type,fnName){
    if(obj.addEventListener){//for DOM
        obj.addEventListener(type,fnName,false);
    }else if(obj.attachEvent){//for IE
        obj.attachEvent('on'+type,fnName);
    }else{//for others
        obj['on'+type]=fnName;
    }
}

3-刪除事件處理函數

Eventutil.removeEventHandler=function(obj,type,fnName){
    if(obj.removeEventListener){//for DOM
        obj.removeEventListener(type,fnName,false);
    }else if(obj.detachEvent){//for IE
        obj.detachEvent('on'+type,fnName);
    }else{//for others
        obj['on'+type]=null;
    }

}

3-格式化event對象

Eventutil.formatEvent=function (oEvent){
    if(document.all){

        //IE字符代碼用keyCode,而DOM用charCode

        oEvent.charCode=(oEvent.type=='keypress')?oEvent.keyCode:0;

        //eventphase：1-Event.CAPTURING_PHASE..
        //2-Event.AT_TARGET,3-Event.BUBBLING_PHASE

        oEvent.eventPhase=2;
        oEvent.isChar=(oEvent.charCode>0); 

        //pageX,pageY和clientX，clientY(IE no pageX/Y)

        oEvent.pageX=oEvent.clientX+document.body.scrollLeft;
        oEvent.pageY=oEvent.clientY+document.body.scrollTop;

        //阻止默認行爲，IE:returnValue=false;DOM:preventDefault();

        oEvent.preventDefault=function(){
            this.returnValue=false;//?能不能用oEvent 固然能夠
        };

        //取消事件冒泡,IE:cancelBubble=true;DOM:stopPropagation()

        oEvent.stopPropagation=function(){
            this.cancelBubble=true;
        };

        //引發事件的元素，IE:srcElement;DOM:target
        oEvent.target=oEvent.srcElement;

        //事件的第二目標
        //IE：fromElement(鼠標所要離開的元素)-toElement(鼠標所要移入的元素)
        //DOM標準：relatedTarget

        if(oEvent.type=='onmouseover'){
            oEvent.relatedTarget=oEvent.fromElement;
        }else if(oEvent.type=='onmouseout'){
            oEvent.relatedTarget=oEvent.toElement;
        }

        //事件發生的時間，IE：no，DOM:timestamp(時間戳)

        oEvent.timeStamp=(new Date().getTime());
    }
    return oEvent;
}

4-獲取事件對象

在IE中，事件對象時window對象的一個屬性event

在DOM標準中，event對象必須做爲惟一的參數傳遞給事件處理函數

關於caller的具體用法請參考click here

Eventutil.getEvent=function(){
    if(window.event){
        return this.formatEvent(window.event);
    }else{
        //caller-每個函數都有的屬性，它包含了指向了調用它的方法的引用
        return Eventutil.getEvent.caller.arguments[0];
    }
}

5-使用方法

DEMO-阻止右鍵菜單JavaScript代碼（HTML省略，請讀者自行加上）

var oDiv=document.getElementById('demo');
document.oncontextmenu=function(){
    var e=Eventutil.getEvent();
    e.preventDefault();
}

最後的話：

若有錯誤或者不妥還請斧正！