7.5.1事件處理中的兼容性處理先來回顧一下事件處理中有哪些不同。標準事件模型和IE事件模型主要存在以下差異：◆事件傳播機制不同——標準事件模型事件傳播分為3個階段：捕捉階段、目標階段和冒泡階段，而IE模型事件傳播只有冒泡一種形式。

◆事件對象不同——這里有兩層含義，第一是事件對象的傳遞方式不同：標準事件模型中事件對象在事件發(fā)生時生成，并以參數(shù)的形式傳遞給事件處理函數(shù)；而IE模型中事件對象以全局對象event的形式出現(xiàn)，而不作為參數(shù)進行傳遞。第二是對象的屬性和方法不同（見7.3.1節(jié)）。

◆事件注冊和注銷方式不同——標準事件模型用addEventListener()和removeEventListener()注冊和注銷事件處理函數(shù)，而IE模型的瀏覽器使用attachEvent()和detachEvent()注冊和注銷事件處理函數(shù)。首先介紹如何編寫跨瀏覽器注冊/注銷事件的應(yīng)用程序。1、跨瀏覽器注冊/注銷事件跨瀏覽器注冊事件/注銷事件首先要區(qū)分標準模型的瀏覽器還是IE瀏覽器。區(qū)分的方法：查看元素是否包含addEventListener屬性或者attachEvent屬性，如果包含addEventListener屬性則為標準模型的瀏覽器，否則為IE瀏覽器。

◆若為標準模型的瀏覽器則調(diào)用addEventListener()注冊事件處理函數(shù)；

◆若為IE瀏覽器則調(diào)用attachEvent()注冊事件處理函數(shù)；

◆如果兩者都不是，則使用添加元素事件處理屬性的方式注冊事件處理函數(shù)，這種方式可適應(yīng)幾乎100%的瀏覽器。清單7-1跨瀏覽器注冊事件的函數(shù)functionaddEvent(elem,eventType,func){ if(elem.addEventListener){ elem.addEventListener(eventType,func,false); }elseif(elem.attachEvent){ elem.attachEvent("on"+eventType,func); }else{ elem["on"+eventType]=func; }}只要進行事件處理就需要用到這個事件注冊函數(shù)，所以把它（addEvent()）放到了隨書源代碼的js目錄下的utils.js文件中，后面會經(jīng)常用到這個函數(shù)。下面介紹跨瀏覽器注銷事件的函數(shù)，方法與注冊事件處理函數(shù)的方法類似。只不過這里是檢查removeEventListener和detachEvent屬性。

◆如果元素存在removeEventListener屬性則調(diào)用removeEventListener()方法注銷事件處理器（或者稱為事件處理函數(shù)）；

◆如果存在detachEvent屬性則調(diào)用detachEvent()方法注銷事件處理器；

◆如果兩者都不能起作用，就采用將元素的事件處理屬性（"on"+事件類型的格式）置為空的辦法注銷事件處理程序。完整代碼如清單7-2所示。清單7-2跨瀏覽器注銷事件處理器的代碼functionremoveEvent(elem,eventType,func){ if(elem.removeEventListener){ elem.removeEventListener(eventType,func,false); }elseif(elem.detachEvent){ elem.detachEvent("on"+eventType,func); }else{ elem["on"+eventType]=null; }}與addEvent()一樣，這段代碼也在隨書源碼的js文件夾中的utils.js文件中。這個utils.js文件將隨著學習的不斷深入添加更多的內(nèi)容，學習完本書后大家可以添加一些其他的功能，并將它用在實際項目中。另外，這個addEvent()函數(shù)沒有考慮在哪個階段處理事件，也就是沒有標準模型的useCapture參數(shù)，而是默認的把它置為了false，也就是默認在冒泡階段處理事件。大家可以把這個addEvent()函數(shù)再添加一個參數(shù)，由用戶指定在哪個階段處理事件，這個作為練習留給讀者來完成。2、事件對象兼容性處理

兩種事件處理模型中事件對象的差異體現(xiàn)在事件對象的傳遞方式和事件對象自身的屬性和方法上，想要編寫兼容處理的程序，則必須兼顧這兩方面的差異?，F(xiàn)把兩種對象的差異總結(jié)如下，如表7-6所示。表7-6標準事件對象與IE事件對象的屬性和方法的差異屬性/行為IE事件對象標準事件對象目標元素（事件源）srcElementtarget前一元素fromElementrelatedTarget后一元素toElementrelatedTarget取消冒泡cancelBubblestopPropagation()取消默認處理returnValuepreventDefault()事件對象的兼容性處理首先要處理事件對象的傳遞差異，標準模型中事件對象作為事件處理器（函數(shù)）的參數(shù)傳遞給事件處理函數(shù)，而IE模型的瀏覽器則把事件對象作為全局對象使用（見7.3節(jié)），所以獲取事件對象的方式不同，這是首先要解決的問題。利用JavaScript邏輯或（||）運算的特性，可以采用以下方式統(tǒng)一兩種對象獲取方式：functioneventHandler(eventObj){ varevt=eventObj||window.event; //evt即獲取到的事件對象}JavaScript的邏輯或運算符比較特殊，eventObj和window.event哪一個存在（即為真）則返回哪個對象，而不是僅僅返回一個布爾值。通過這一性質(zhì)可以把兩種對象傳遞方式統(tǒng)一起來。獲取事件對象之后，就是要處理表7-6中的這些不同的屬性和方法了。有了上面的處理事件對象傳遞不同的經(jīng)驗，你可能馬上就會想到仍然使用JavaScript的邏輯與的特性，下面給出處理這些差異的代碼。如清單7-3所示。這里需要說明的是，stopPropagation()和preventDefault()兩個函數(shù)名也可以用作事件對象的屬性（名）。并不是所有的這些差異都需要同時處理，實際應(yīng)用中根據(jù)需要截取相應(yīng)的代碼即可！7.5.2事件處理中參數(shù)的傳遞問題事件處理器（函數(shù)）只能接收一個參數(shù)，那就是事件對象。如果需要傳遞其他額外的參數(shù)該怎么辦呢？這是一個比較實際的問題，往往在處理發(fā)生的事件時，需要其他的參數(shù)，這時就不可避免的遇到這個問題。對于這個問題通用的做法是注冊事件時使用匿名函數(shù)，然后在這個注冊的匿名函數(shù)中調(diào)用帶有其他參數(shù)的函數(shù)來處理這一事件。這樣說起來比較抽象，來看個例子就明白了，這個方法就是下面的方法一。為了說明這一問題，使用這樣一個例子。實例中允許用戶在網(wǎng)頁中輸入兩個數(shù)值，單擊“=”按鈕時，計算這兩個數(shù)值的積。實現(xiàn)這樣的功能有許多方法，下面給出兩種方法，并對兩種方法進行對比分析，指出其中的優(yōu)缺點。方法一：在事件處理中傳遞參數(shù)在這一做法中，首先聲明一個用于實現(xiàn)乘法的函數(shù)multi，然后在事件處理器中獲取用戶輸入的值，再調(diào)用multi函數(shù)計算兩個值的積，最后輸出計算結(jié)果。具體代碼如清單7-4所示。代碼說明如下圖（1、匿名事件處理函數(shù)；（2）在匿名事件處理器中以調(diào)用函數(shù)的方式傳遞額外參數(shù)。）：方法二：直接在事件處理器中計算

這種方法和上一個方法類似，只不過是把調(diào)用multi()函數(shù)計算結(jié)果修改成直接計算結(jié)果，代碼如清單7-5所示。只給出與清單7-4所示代碼不同的部分。清單7-5直接在事件處理器中計算乘積addEvent(document.getElementById('multi'), 'click', function(){varsummand=document.getElementsByName('summand')[0].value; varaddend=document.getElementsByName('addend')[0].value; varresult=summand*addend;//直接計算兩數(shù)的乘積，而不是調(diào)用multi函數(shù) alert(summand+'*'+addend+"="+result); });兩者比較同樣可以得到相同的結(jié)果，方法二沒有方法一的函數(shù)調(diào)用，執(zhí)行速度