W3C方式(事件監聽器)
雖然DOM 0事件監聽器非常的快速也非常的簡單,但是他們都有一定的限制(除了一個事實,那就是他們最終會被抗議)。W3C事件監聽器的最大的好處就是它們支援在同一個元素上發生的相同的事件上添加或者刪除多個handling function。事件監聽器可以在幾種情況下對事件有所反應(雖然大多數的流覽器目前還不支持這種功能)。
在W3C規範中,一個事件可以通過元素的addEventListener方法加到同一個元素上,但是Windows的IE選擇使用一個叫做attachEvent的方法,這個方法在語法上稍有不同。
要在除了IE以外的流覽器中加入事件監聽器,你可以編寫如下類似的代碼:
在IE中,你則需要如下的代碼:
值得注意的是,對於同一個事件,IE使用DOM 0 handler名稱——“onclick”——而不是真正的事件名稱:“click”。其他提交給addEventListener的argument不區分監聽器是在捕捉(true)或者bubble(false)事件傳播期間進行監聽。事件傳播(event propagation)在下面的內容中會更加詳細的討論,但是bubble是最有用的選擇,並且確保在符合標準的流覽器以及IE中表現相同的行為。
兩種方法的差異可以使用一個abstracting function來很容易的區分。我們同時為不支援W3C事件監聽器的流覽器提供一個非常可靠的選擇:
前兩個if分別針對的是標準的流覽器以及IE,但是為了確保多個功能可以用來處理某個元素上發生的一個事件,則使用closure來執行任何與該事件想過的功能。
Closures是JavaScript的高級功能,其餘scoping有關。Closures可以允許一個內在的功能指向所包含功能的變數,即使這些所包含的功能已經運行完畢了。Simon Willison關於這點的解釋非常的詳細,我們有足夠的證據說明closure可以讓我們在不支持W3C的流覽器中加入多個事件監聽器。
分配事件監聽器的跨流覽器編碼如下:
不是真正的文章(Not(quite)the Genuine Article)
雖然DOM 0事件處理器提供其他的方法讓你可以給一個元素的一個事件增加多個監聽,但是它的方法不是W3C方法的完全複製,因為特定的handler不能從一個元素上去掉。
DOM 0handler允許通過返回false而取消一個元素的默認行動,W3C事件監聽器的做法稍微有所不同。要取消一個默認的行動,我們需要修正event object。IE要求你需要將它的returenValue值設為false,基於標準的實施提供了preventDefault的方法來做這件事情。我們可以創建一個function來幫助我們區分其中的差異:
在我們希望取消一個默認的行動的時候,我們就可以調用這個功能:
在執行stopDefaultAction之後,你需要返回false,目的是為了確保不支援W3C的流覽器也可以阻止默認行動的發生。
Safari和W3C事件監聽器
因為Safari中的一個bug,當我們使用W3C事件監聽器時,如果點擊了一個超連結,我們無法取消它的默認行動。為了做到可以取消,你需要使用DOM 0事件監聽器,並且返回值false。
檢查attachEvent
當attachEvent用在一個事件監聽器上時,IE通常將一個event object傳給event handling function,但是我們仍然需要檢查那些使用舊的event model的流覽器中這個object的存在。
使用W3C事件監聽器的一個好處就是你可以將一個單獨的監聽從一個元素上去掉,而不會影響其他的監聽。使用DOM 0是無法做到這點的。
IE使用detachEvent的方法,而其他的流覽器使用的是removeEventListener的方法。這些方法添加監聽的方式都很相似:事件類型必須與function一起處理那個事件類型。標準方法同時需要瞭解是否event handler在capture或者bubble過程中已經註冊對其進行回應。
下面是通過流覽器支持這個方法的一個function:
W3C事件模型以及匿名功能
W3C事件模型不允許去除匿名功能,所以,如果你需要去除一個事件監聽,掛出一個指向這個功能的reference。
對於不支持W3C事件監聽的流覽器,這個功能會去掉已給出事件上所有的event handler:你無法只去掉其中的一個監聽而留下其他的監聽。
推薦給同仁
您想要瞭解更多的免費小竅門以便提升你的網站排名嗎?
請馬上聯繫我們網站管理員:
MSN: chenlinwu@cmmail.com
Email: info@rank-ad.com