javascript瀏覽器相容教學之事件處理_基礎知識

1. window.event

【分析說明】先看一段程式碼

複製程式碼 程式碼如下:

function et()


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

}

　　以上程式碼在IE運作的結果是[object]，而在Firefox無法運作。

　　因為在IE中event作為window物件的一個屬性可以直接使用，但是在Firefox中卻使用了W3C的模型，它是透過傳參的方法來傳播事件的，也就是說你需要為你的函數提供一個事件響應的介面。

【相容處理】加入對event判斷，依照瀏覽器的差異來得到正確的event：

複製程式碼

程式碼如下:


function et()　　//相容IE和Firefox
alert(evt);
}

2. 鍵盤值的取得

【分析說明】IE和Firefox取得鍵盤值的方法不同，可以理解，Firefox下的event.which與IE下的event.keyCode相當。關於彼此不同，可參考《鍵盤事件中keyCode、which和charCode 的兼容性測試》

【相容處理】
複製程式碼

複製程式碼 程式碼如下:

function myKeyPress(evt){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屬性。

【相容處理】

複製程式碼 程式碼如下:

ele=function(evt){ //擷取目前事件作用的物件
evt=evt||window.event;
　　return
　　(obj=event.srcElement?event.srcElement:event.target;);
}
?event.srcElement:event.target;);
}

4. 事件監聽

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

【相容處理】最簡單的相容性處理就是封裝這兩套介面：





複製程式碼


程式碼如下:


function addEvent(elem, eventName, handler) {

function addEvent(elem, eventName, handler) {　　if (elem.attachEvent) {　　　　elem.attachEvent("on" eventName, .call(elem)});

　　　　//此處使用回呼函數call()，設this指向elem

　　} else if (elem.addEventListener) {

　　　　elem.addEventListener(eventName, handler, false);, . {

　　if (elem.detachEvent) {

　　　　elem.detachEvent("on" eventName, function(){

　　　　　　　　　　　　　　　　　　　　　　　　　　　handler.call(elem)});

　　　　//此處使用回呼函數call ()，讓this指向elem

　　} else if (elem.removeEventListener) {

　　　　elem.removeEventListener(eventName, handler, false);

『 　　需要特別注意，Firefox下，事件處理函數中的this指向被監聽元素本身，而在IE下則不然,可使用回調函數call，讓當前上下文指向監聽的元素。 5. 滑鼠位置 【分析說明】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。複雜點還要考慮絕對位置。 複製程式碼 程式碼如下:

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);
}