快捷導(dǎo)航

IE和Firefox下event事件雜談

更新時間：2009年12月18日 21:35:36 作者：

如果在使用javascript的時候涉及到event處理，就需要知道event在不同的瀏覽器中的差異。

因為javascript的事件模型有三種，它們分別是NN4、IE4+和W3C/Safari;這也造成了在不同的瀏覽器中處理event的差異，這里結(jié)合一些零碎的代碼來說明如何做到event在IE4+和Firefox下的正常工作。
首先看如下代碼：

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

 
function doEventThing(eventTag){ 
var event = eventTag||window.event; 
var currentKey = event.charCode||event.keyCode; 
var eventSource =window.event.srcElement||eventTag.target; 
} 

　　這段代碼主要是為了處理鍵盤事件的，在IE中event作為window對象的一個屬性可以直接使用，但是在Firefox中卻使用了W3C的模型，它是通過傳參的方法來傳播事件的，也就是說你需要為你的函數(shù)提供一個事件響應(yīng)的接口，在上述函數(shù)中，
eventTag扮演的就是這個角色。
　　var event = eventTag||window.event;
　　這段代碼可以根據(jù)瀏覽器的不同來得到正確的event，并在程序中使用，如果在IE4+下面使用這段代碼，因為eventTag為null可以保證event = window.event，但是如果在Firefox下運行的話則因為手工的給定了eventTag所以var event = eventTag。根據(jù)對這一段代碼的分析我們也不難看出可以對doEventThing方法進(jìn)行如下的改造(因為javascript允許我們在定義function的時候不明確指出參數(shù)的數(shù)量):

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

 
function doEventThing(){ 
var event = arguments[0]||window.event; 
//other code 
} 

　　在Firefox下arguments[0]在特定的場合(沒有顯式的指定function參數(shù)數(shù)量的時候)被做為傳播事件的參數(shù)來使用…………
　　至于var currentKey = event.charCode||event.keyCode;也是不同的瀏覽器所致，在IE4+下面記錄鍵盤的是keyCode，但是在Firefox下的卻是charCode,為此我們需要處理他們的差異。
　　還有一個差異就是事件源的獲?。和ㄟ^語句
　　var eventSource = window.event.srcElement||eventTag.target;
　　我們也看到了IE與W3C的不同。
　　經(jīng)過上面的包裝，我們基本上可以在IE4+和Firefox下面順利的使用事件機(jī)制了，當(dāng)然如果為了通用性可以對這種差異進(jìn)封裝來形成自己的Event對象在程序中誤差別的使用事件對象，這里就不在介紹了。

　　接下來分析事件的綁定：大概分為如下5種
　　1、綁定到元素，這也是比較常見的一種比如：
　　<input type="button" onclick="doEventThing(event)">
,這樣我們就把doEventThing綁定到了該button對象上，點擊此按鈕事件就被觸發(fā)。
　　2、綁定事件到對象：這也是比較常見的一種，特別是在IE4+下面：
　　document.getElementById("divid").onclick = doEventThing;
　　3、使用<script for>進(jìn)行事件的綁定，這只在IE4+下有用（為buttong1綁定事件，邏輯在script塊中書寫event來指定怎么觸發(fā)事件）：

<script event="onclick" for="button1">
　// script statements here
</script>

4、使用 IE5/Windows 的 attachEvent() 方法
5、使用 W3C DOM 的 addEventListener() 方法
　　addEventListener("eventType",listenerReference,captureFlag);
　　第三個參數(shù)則是一個 Boolean 值，指明該結(jié)點是否以DOM中所謂的捕捉模式來偵聽事件。對于一個典型的事件偵聽器來說，第三個參數(shù)應(yīng)該為false（假）。

prototype在綁定事件的時候兼容IE和W3C的時候做的處理如下：

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

 
_observeAndCache: function(element, name, observer, useCapture) { 
if (!this.observers) this.observers = []; 
if (element.addEventListener) {//W3C DOM 
this.observers.push([element, name, observer, useCapture]); 
element.addEventListener(name, observer, useCapture); 
} else if (element.attachEvent) {//IE5/Windows 
this.observers.push([element, name, observer, useCapture]); 
element.attachEvent('on' + name, observer); 
} 
} 

撇開this.observers.pust([element,name,observer,useCapture])不談，我們對4、5所說的事件綁定就很清楚了。我們知道prototype的此方法的useCapture在IE下沒有作用，只對W3C的事件處理機(jī)制起作用。