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

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

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

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

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

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

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

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

最新評(píng)論