W3C和微軟都著力于發(fā)展自己的事件注冊(cè)模型來(lái)取代Netscape的傳統(tǒng)模型。雖然對(duì)于微軟的模型我不是很感冒，但是w3c的還是不錯(cuò)的，除了這個(gè)鼠標(biāo)定位 的問(wèn)題。不過(guò)現(xiàn)在只有小部分瀏覽器支持。
W3C
W3C的DOM層面事件規(guī)范注意到了傳統(tǒng)模式的問(wèn)題。他對(duì)于你想在一個(gè)元素上綁定多個(gè)事件提供了一個(gè)很好的解決辦法。
W3C事件注冊(cè)模型的關(guān)鍵就是addEventListener()。你給他三個(gè)參數(shù)：事件類(lèi)型，要執(zhí)行的函數(shù)和一個(gè)布爾值（true或者false)我一會(huì)再解釋。把我們熟知的doSomething()函數(shù)注冊(cè)到一個(gè)元素的onclick事件上，你可以這樣做：
element.addEventListener('click',doSomething,false)
這種模型的魅力在于我們可以想加多少監(jiān)聽(tīng)就可以加多少。如果用我們之前的傳統(tǒng)模式里面的例子，我們就可以寫(xiě)成這樣：
element.addEventListener('click',startDragDrop,false)
element.addEventListener('click',spyOnUser,false)
當(dāng)用戶點(diǎn)擊元素的時(shí)候兩個(gè)事件處理程序都會(huì)執(zhí)行。需要注意的是W3C標(biāo)準(zhǔn)不能確定哪個(gè)事件先執(zhí)行。所以你也不能認(rèn)為startDragDrop()就在spyOnUser()之前執(zhí)行。
移除事件處理程序也是非常的簡(jiǎn)單，用removeEventListener()就行了。所以：
element.removeEventListener('click',spyOnUser,false)
就會(huì)移除第二個(gè)事件處理程序但是第一個(gè)不會(huì)發(fā)生變化。非常漂亮的程序，完全解決了傳統(tǒng)模式下的問(wèn)題。

匿名函數(shù)
在W3C模式下你依然可以使用匿名函數(shù)：

true或者false
true或者false是addEventListener的最后一個(gè)參數(shù)，意思是你想讓你的函數(shù)在捕獲階段還是冒泡階段執(zhí)行。如果你不確定，那就使用false（冒泡階段）。
this
在JavaScript里this關(guān)鍵字通常指函數(shù)的所有者。如果this指向事件發(fā)生的HTML元素，那么一切都是那么的美好，你可以很簡(jiǎn)單的做很多事情。
不幸的是，雖然this非常的強(qiáng)大，但是如果你不是明確的知道他怎么運(yùn)作的話使用起來(lái)還是比較難的。關(guān)于這個(gè)我在另一個(gè)地方有詳細(xì)的討論。
在w3c模型下他的運(yùn)作和在傳統(tǒng)模式下是一樣的：他表示現(xiàn)在正在處理事件的HTML元素。

如果你把doSomething()注冊(cè)在任意一個(gè)HTML元素的click實(shí)踐上，那么當(dāng)用戶點(diǎn)擊的時(shí)候這個(gè)元素的背景就會(huì)變成紅色。

哪個(gè)事件處理程序被注冊(cè)了呢？
現(xiàn)在這個(gè)W3C事件注冊(cè)模式有一個(gè)問(wèn)題就是你不知道一個(gè)元素都有哪些事件處理程序被注冊(cè)了。在傳統(tǒng)模式下面你可以：
alert(element.onclick)
你就可以看到哪些函數(shù)注冊(cè)了，undefined就是沒(méi)有函數(shù)注冊(cè)在這個(gè)事件上。只是在最近的DOM Level 3事件中W3C才添加了一個(gè)eventListenerList來(lái)存儲(chǔ)已經(jīng)注冊(cè)了的事件處理程序。因?yàn)樘铝?，鮮有瀏覽器支持。然而，問(wèn)題已經(jīng)解決了。
還好的是removeEventListener()不會(huì)因?yàn)槟銢](méi)有注冊(cè)元素的某個(gè)事件而返回錯(cuò)誤，所以你可以不用擔(dān)心的使用removeEventLister()。
微軟
微軟也有一個(gè)事件注冊(cè)模型。跟W3C的很像，但是有一個(gè)嚴(yán)重的缺陷。
注冊(cè)一個(gè)事件處理程序，attach到一個(gè)元素：
element.attachEvent('onclick',doSomething)
或者，你需要兩個(gè)事件處理程序：
element.attachEvent('onclick',startDragDrop)
element.attachEvent('onclick',spyOnUser)
移除一個(gè)也非常簡(jiǎn)單：
element.detachEvent('onclick',spyOnUser)

缺陷
跟W3C的相比較，微軟有兩個(gè)嚴(yán)重的問(wèn)題：
、事件總是冒泡，沒(méi)有被捕捉的可能。
、事件處理程序是被引用的，而不是拷貝的，所以this關(guān)鍵字總是指向window然后就一點(diǎn)用都沒(méi)有。
這兩個(gè)問(wèn)題的結(jié)果就是如果一個(gè)事件冒泡了那么你是沒(méi)有可能知道哪個(gè)元素在處理事件。在后面的事件順序一章我會(huì)詳細(xì)的解釋。
而且微軟的標(biāo)準(zhǔn)只被IE支持，也不能用來(lái)跨瀏覽器。就算你只是給windows瀏覽器寫(xiě)腳本也最好別用，因?yàn)槊芭輪?wèn)題會(huì)讓事情變得不可收拾。
繼續(xù)
如果你想繼續(xù)學(xué)習(xí)，請(qǐng)看下一章。
原文地址：http://www.quirksmode.org/js/events_advanced.html
第一次翻譯 大家多多包含 我的twitter：@rehawk

最新評(píng)論