JavaScript Event學(xué)習(xí)第五章：高級(jí)事件注冊(cè)模型

在這一章我會(huì)講解兩種高級(jí)時(shí)間注冊(cè)模型：W3C和微軟的。因?yàn)檫@兩個(gè)方法都不能跨瀏覽器，所以在現(xiàn)在看來(lái)他們的使用場(chǎng)合并不多。

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ù)：事件類型，要執(zhí)行的函數(shù)和一個(gè)布爾值（true或者false)我一會(huì)再解釋。把我們熟知的doSomething()函數(shù)注冊(cè)到一個(gè)元素的onclick事件上，你可以這樣做：

1 element.addEventListener('click',doSomething,false)

這種模型的魅力在于我們可以想加多少監(jiān)聽(tīng)就可以加多少。如果用我們之前的傳統(tǒng)模式里面的例子，我們就可以寫成這樣：

1 element.addEventListener('click',startDragDrop,false)

2 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()就行了。所以：

1 element.removeEventListener('click',spyOnUser,false)

就會(huì)移除第二個(gè)事件處理程序但是第一個(gè)不會(huì)發(fā)生變化。非常漂亮的程序，完全解決了傳統(tǒng)模式下的問(wèn)題。

 

 

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

1 element.addEventListener('click',function () {

2 this.style.backgroundColor = '#cc0000'

3 },false)

 

 

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元素。

1 element.addEventListener('click',doSomething,false);

2 another_element.addEventListener('click',doSomething,false);

3

4 function doSomething() {

5 this.style.backgroundColor = '#cc0000';

6 }

如果你把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è)元素：

1 element.attachEvent('onclick',doSomething)

或者，你需要兩個(gè)事件處理程序：

1 element.attachEvent('onclick',startDragDrop)

2 element.attachEvent('onclick',spyOnUser)

移除一個(gè)也非常簡(jiǎn)單：

1 element.detachEvent('onclick',spyOnUser)

 

 

 

缺陷
跟W3C的相比較，微軟有兩個(gè)嚴(yán)重的問(wèn)題：
1、事件總是冒泡，沒(méi)有被捕捉的可能。
2、事件處理程序是被引用的，而不是拷貝的，所以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瀏覽器寫腳本也最好別用，因?yàn)槊芭輪?wèn)題會(huì)讓事情變得不可收拾。