跨瀏覽器事件對象封裝

封裝一個可以隔離瀏覽器差別的JavaScript庫EventUtil，主要是使用能力檢測。

var EventUtil={
    addHandler:function(element,type,handler){
        if(element.addEventListener){ 
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){
            element.attachEvent('on'+type,handler);
        }else{
            element['on'+type]=handler;
        }
    },
    getEvent:function(event){
        return event?event :window.event;
    },
    getTarget:function(){
        return event.target | event.srcElement;
    },
    preventDefault:function(event){
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue=false;
        }
    },
    removeHandler:function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent){
            element.detachEvent('on'+type,handler);
        }else{
            element['on'+type]=null;
        }
    },
    stopPropagation:function(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble=true;
        }
    }
};

View Code

 

1、跨瀏覽器的事件處理程序

要保證處理事件的代碼在大多數瀏覽器下一致運行，只須要關注冒泡階段。

一、添加事件：addHandler

//添加事件
    /*
    element:要操做的元素
    type:事件名稱
    handler:事件處理程序函數
    */
    addHandler:function(element,type,handler){
        if(element.addEventListener){ //存在DOM2級方法，則使用並傳入事件類型、事件處理程序函數和第3個參數false(表示冒泡階段)
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){//爲兼容IE8及更早瀏覽器，注意事件類型必須加上"on"前綴
            element.attachEvent('on'+type,handler);
        }else{
            element['on'+type]=handler;//其餘方法都無效，默認採用DOM0級方法，使用方括號語法將屬性名指定爲事件處理程序
        }
    }

二、刪除事件

//移除addHandler添加的事件處理程序
/*
element:要操做的元素
type:事件名稱
handler:事件處理程序函數
*/
removeHandler:function(element,type,handler){
    if(element.removeEventListener){
        element.removeEventListener(type,handler,false);
    }else if(element.detachEvent){
        element.detachEvent('on'+type,handler);
    }else{
        element['on'+type]=null;
    }
}

View Code

 2、跨瀏覽器事件處理

一、獲取事件

返回event對象的引用

getEvent:function(event){
        return event?event :window.event;
}

調用的時候

btn.onclick=function(event){
    event=EventUtil.getEvent(event);//這行代碼添加到開頭，確保隨時可使用event對象，沒必要擔憂用戶使用的什麼瀏覽器
};

二、獲取目標元素

getTarget:function(){
    return event.target || event.srcElement;
},

調用

btn.onclick=function(event){
    event=EventUtil.getEvent(event);
    var target=Event.getTarget(event);
};

三、取消事件默認行爲

preventDefault:function(event){
    if(event.preventDefault){
        event.preventDefault();
    }else{
        event.returnValue=false;
    }
}

調用

var link=document.getElementById("myLink");
link.onclick=function(event){
    event=EventUtil.getEvent();
    EventUtil.preventDefault(event);
}

四、阻止事件冒泡

stopPropagation:function(event){
    if(event.stopPropagation){
        event.stopPropagation();
    }else{
        event.cancelBubble=true;
    }
}

調用

var link=document.getElementById("myLink");
link.onclick=function(event){
    event=EventUtil.getEvent();
    EventUtil.stopPropagation(event);
}

document.body.onclick=function(event){
    alert("Body clicked");
}

3、得到相關元素

getRelatedTarget:function(event){
    if(event.relatedTarget){
        return event.relatedTarget;
    }else if(event.toElement){
        return event.toElement;
    }else if(event.fromEvent){
        return event.fromEvent;
    }else{
        return null;
    }
}

4、 得到鼠標按鈕

對於mousedown和mouseup事件，在event對象中存在一個button屬性，表示按下或釋放的按鈕。

DOM的button屬性有3個取值：

• 0：表示主鼠標按鈕(鼠標左鍵)
• 1：表示中間的鼠標按鈕（鼠標滾輪按鈕）
• 2：表示次鼠標按鈕（鼠標右鍵）

 IE8及以前版本也提供了button屬性，但這個屬性的值與DOM的button屬性有很大差別。

• 0：表示沒有按按鈕。——》0
• 1：表示按下了鼠標左鍵——》0
• 2：表示按下了鼠標右鍵——》2
• 3：表示同時按下了鼠標左右鍵——》0
• 4：表示按下了中間的鼠標按鈕——》1
• 5：表示同時按下了鼠標左鍵和中間的鼠標按鈕——》0
• 6：表示同時按下了鼠標右鍵和中間的鼠標按鈕——》2
• 7：表示同時按下了三個鼠標按鈕——》》DOM0

兼容性處理：將IE中其餘選項分別轉換成如同按下這三個按鍵中的一個便可（同時將主按鈕做爲優先選取的對象）。IE中返回的5和7會被轉換成DOM模型中的0。因爲兩種模型有同名的button屬性，因此不能直接用能力檢測。支持DOM版鼠標事件的瀏覽器能夠經過hasFeature()方法來檢測，因此跨瀏覽器的getButton()方法以下：

getButton:function(event){
    if(document.implementation.hasFeature("MouseEvents","2.0")){
        return event.button;
    }else{
        switch(event.buton){
            case 0:
            case 1:
            case 3:
            case 5:
            case 7:
                    return 0;
            case 2:
            case 6:
                    return 2;
            case 4:
                    return 1;                                                
        }
    }        

}

調用：

var div=document.getElementById("myDiv");
EventUtil.addHandler(div,"mouseout",function(event){
    event=EventUtil.getEvent(event);
    alert(EventUtil.getButton(event));
});

5、獲取鼠標滾動增量值

DOM中當用戶向前滾動鼠標滾輪時，wheelDelta是120的倍數；當用戶向後滾動鼠標滾輪時，wheelDelta是-120的倍數。

Opera 9.5以前的版本，wheelDelta值的正負號是顛倒的。

Firefox支持一個DOMMouseScroll的相似事件，且鼠標有關信息保存在detail屬性中。當向前滾動鼠標滾輪時，這個屬性的值是-3的倍數，向後滾動鼠標滾輪時，這個值是3的倍數。

getWheelDelta:function(event){
    if(event.wheelDelta){
        return(client.engine.opera && client.engine.opera<9.5? -event.wheelDelta:event.wheelDelta);
    }else{
        return -event.detail*40; 
    }
}

調用：

能夠將相同的事件處理程序指定給mousewheel和DOMMouseScroll事件了。

(function(){
    function handleMouseWheel(event){
        event=EventUtil.getEvent(event);
        var delta=EventUtil.getWheelDelta(event);
        alert(delta);
    }
    EventUtil.addHandler(document,"mousewheel",handleMouseWheel);
    EventUtil.addHandler(document,"DOMMouseScroll",handleMouseWheel);
})();

若是沒有封裝的話，client.engine.opera 這句代碼運行下會報錯client is not defined，由於目前尚未封裝這個方法，因此等下一個博客我會研究代理檢測封裝下這個方法； 因此先不考慮opera9.5,先註釋掉這句代碼；

6、獲取字符編碼

IE9，Firefox，Chrome和Safari的event對象的charCode 屬性表明按下那個鍵所表明字符的ASCII編碼。

IE8及以前版本中Opera是在keyCode中保存字符的ASCII編碼。

檢查charCode屬性是否可用，不可用則使用keyCode。

getCharCode:function(event){
    if(typeof event.charCode=="number"){//在不支持的瀏覽器中值是undefined
        return event.charCode;
    }else{
        return event.keyCode;
    }
}

調用

EventUtil.addHandler(textbox,"keypress",function(event){
    event=EventUtil.getEvent(event);
    console.log(EventUtil.getCharCode(event));
});  

 

本文做者starof,因知識自己在變化，做者也在不斷學習成長，文章內容也不定時更新，爲避免誤導讀者，方便追根溯源，請諸位轉載註明出處：http://www.cnblogs.com/starof/p/6555142.html有問題歡迎與我討論，共同進步。