首頁 >web前端 >js教程 >javascript瀏覽器相容教學之事件處理_基礎知識

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

WBOY
WBOY原創
2016-05-16 16:45:211083瀏覽

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);
}
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn