javascript瀏覽器兼容教程之事件處理

更新時間：2014年06月09日 11:55:45 作者：

如果在使用javascript的時候涉及到event處理，就需要知道event在不同的瀏覽器中的差異，主要的JavaScript的事件模型有三種（參考《Supporting Three Event Models at Once》），它們分別是NN4、IE4+和W3C/Safar。

1. window.event

【分析說明】先看一段代碼

復(fù)制代碼代碼如下:

function et()
{ 
alert(event);//IE: [object]
}

　　以上代碼在IE運行的結(jié)果是[object]，而在Firefox無法運行。

　　因為在IE中event作為window對象的一個屬性可以直接使用，但是在Firefox中卻使用了W3C的模型，它是通過傳參的方法來傳播事件的，也就是說你需要為你的函數(shù)提供一個事件響應(yīng)的接口。

【兼容處理】添加對event判斷，根據(jù)瀏覽器的不同來得到正確的event：

復(fù)制代碼代碼如下:

function et()
{ 
evt=evt?evt:(window.event?window.event:null);
　　//兼容IE和Firefox
alert(evt);
}

2. 鍵盤值的取得

【分析說明】IE和Firefox獲取鍵盤值的方法不同，可以理解，F(xiàn)irefox下的event.which與IE下的event.keyCode相當(dāng)。關(guān)于彼此不同，可參考《鍵盤事件中keyCode、which和charCode 的兼容性測試》

【兼容處理】
復(fù)制代碼

復(fù)制代碼代碼如下:

function myKeyPress(evt){
//兼容IE和Firefox獲得keyBoardEvent對象
evt = (evt) ? evt : ((window.event) ? window.event : "")
//兼容IE和Firefox獲得keyBoardEvent對象的鍵值
var key = evt.keyCode?evt.keyCode:evt.which;
if(evt.ctrlKey && (key == 13 || key == 10)){
　　　　　　//同時按下了Ctrl和回車鍵
//do something;
}
}

3. 事件源的獲取

【分析說明】在使用事件委托的時候，通過事件源獲取來判斷事件到底來自哪個元素，但是，在IE下，event對象有srcElement屬性，但是沒有target屬性；Firefox下，even對象有target屬性，但是沒有srcElement屬性。

【兼容處理】

復(fù)制代碼代碼如下:

ele=function(evt){ //捕獲當(dāng)前事件作用的對象
evt=evt||window.event;
　　return
　　(obj=event.srcElement?event.srcElement:event.target;);
}

4. 事件監(jiān)聽

【分析說明】在事件監(jiān)聽處理方面，IE提供了attachEvent和detachEvent兩個接口，而Firefox提供的是addEventListener和removeEventListener。

【兼容處理】最簡單的兼容性處理就是封裝這兩套接口：

復(fù)制代碼代碼如下:

function addEvent(elem, eventName, handler) {
　　if (elem.attachEvent) {
　　　　elem.attachEvent("on" + eventName, function(){
　　　　　　　　　　　　　　　　　　　　handler.call(elem)});
　　　　//此處使用回調(diào)函數(shù)call()，讓this指向elem
　　} else if (elem.addEventListener) {
　　　　elem.addEventListener(eventName, handler, false);
　　}
}
function removeEvent(elem, eventName, handler) {
　　if (elem.detachEvent) {
　　　　elem.detachEvent("on" + eventName, function(){
　　　　　　　　　　　　　　　　　　　　handler.call(elem)});
　　　　//此處使用回調(diào)函數(shù)call()，讓this指向elem
　　} else if (elem.removeEventListener) {
　　　　elem.removeEventListener(eventName, handler, false);
　　}
}

　　需要特別注意，F(xiàn)irefox下，事件處理函數(shù)中的this指向被監(jiān)聽元素本身，而在IE下則不然,可使用回調(diào)函數(shù)call，讓當(dāng)前上下文指向監(jiān)聽的元素。

5. 鼠標(biāo)位置

【分析說明】IE下，even對象有x，y屬性，但是沒有pageX，pageY屬性；Firefox下，even對象有pageX，pageY屬性，但是沒有x，y屬性。

【兼容處理】使用mX(mX = event.x ? event.x : event.pageX;)來代替IE下的event.x或者Firefox下的event.pageX。復(fù)雜點還要考慮絕對位置。

復(fù)制代碼代碼如下:

function getAbsPoint(e){
var x = e.offsetLeft, y = e.offsetTop;
while (e = e.offsetParent) {
x += e.offsetLeft;
y += e.offsetTop;
}
alert("x:" + x + "," + "y:" + y);
}

您可能感興趣的文章: