JavaScript Event學(xué)習(xí)第四章：傳統(tǒng)的事件注冊模型

在最古老的JavaScript瀏覽器里注冊事件只能通過內(nèi)聯(lián)模式。自從DHTML從根本上改變了你操作頁面的方法，事件的注冊就必須有擴展性而且要有很強的適應(yīng)性。所以就必須有相應(yīng)的事件模型。Netscape在第三代瀏覽器中就開始了，IE在第四代瀏覽器開始。

因為Netscape 3就開始支持這種新的事件注冊模型，在瀏覽器戰(zhàn)爭前就是事實上的標準。所以微軟不得不也是最后一次為了網(wǎng)上那些數(shù)不清的使用了Netscape事件處理模型的頁面在兼容性上做出了讓步。

所以這兩個瀏覽器，事實上也是所有的瀏覽器都支持下面的代碼：

element.onclick = doSomething;<BR>

這是注冊一個事件的最好的辦法。無論什么時候用戶點擊了這個HTML元素，那么doSomething()都會執(zhí)行。這是唯一一個能夠跨瀏覽的注冊事件的最好的辦法，深刻的理解這個模型和他的限制也是非常重要的。

因為沒有官方的標準，所以我暫且稱為傳統(tǒng)事件注冊模型(traditional event registration model)。同時，w3c也標準化了事件注冊，微軟也推出了高級模式，但是傳統(tǒng)模式依然能很好的運行。

高級事件注冊程序
從Netscape 3/IE 4開始，JavaScript能夠識別元素上的一系列事件的屬性。大多數(shù)HTML元素都有onclick,onmouseover,onkeypress等等屬性。那些元素有哪些屬性--哪些元素支持哪些事件--都依賴于瀏覽器。

這些屬性對于他們本身也不是什么新穎的東西。在最古老的JavaScript瀏覽器里面就已經(jīng)存在了。

<a href="somewhere.html" onclick="doSomething()"><BR>

這里的A標簽就有一個onclick參數(shù)，在JavaScript里面就成為了A元素的屬性。那些古老的瀏覽器的事件處理程序只能通過在頁面源代碼里面設(shè)置元素的參數(shù)這個辦法來注冊。如果你想讓這個腳本在所有的A標簽執(zhí)行，那么你就需要再所有的鏈接上面加上onclick事件。

有了傳統(tǒng)事件注冊模型的到來，這些onclick，onmouseover或者HTML元素的其他事件處理就都可以通過JavaScript來注冊了。現(xiàn)在你可以添加、修改或者刪除一些事件處理程序而不用動HTML的一絲一毫。當你通過DOM來訪問HTML元素的時候你就可以像下面這樣寫代碼了：

element.onclick = doSomething;<BR>

現(xiàn)在我們的示例函數(shù)doSomething()就注冊在了element元素的onclick屬性上，而且當用戶點擊了這個元素函數(shù)就會執(zhí)行。注意事件的名字必須都是小寫。

刪除這個事件處理程序，只要簡單的讓點擊事件為空就行了：

element.onclick = null;<BR>

事件處理程序跟普通的JavaScript函數(shù)一樣。即使事件沒有發(fā)生的時候他也能執(zhí)行。如果你則這樣寫：

element.onclick()<BR>

那么doSomething一樣會執(zhí)行。雖然如果是一個不知道做什么或者產(chǎn)生錯誤的函數(shù)，這也沒有真實的事件發(fā)生。所以這是一種很少用來執(zhí)行事件處理程序的方法。

微軟的IE5.5和更高版本的IE還有一個fireEvent()方法來完成同樣的事情。使用如下：

element.fireEvent('onclick')<BR>

沒有括號
需要注意的是注冊一個事件處理程序的時候你不能使用括號。onclick方法會被設(shè)置成為另外一個函數(shù)。如果你這樣寫

element.onclick = doSomething();<BR>

那么這個函數(shù)就會執(zhí)行并且它的結(jié)果會被注冊到onclick上。這可不是我們所期望的，我們只是希望在事件發(fā)生的時候函數(shù)能夠執(zhí)行。另外函數(shù)寫出來是為了在事件發(fā)生的時候執(zhí)行，如果沒有關(guān)聯(lián)的執(zhí)行會造成嚴重的混亂和錯誤。

所以我們在事件處理程序中復(fù)制整個doSomething()方法。我們只是想在事件執(zhí)行的時候執(zhí)行這個函數(shù)。

this
在JavaScript里this關(guān)鍵字通常指函數(shù)的所有者。如果this指向事件發(fā)生的HTML元素，那么一切都是那么的美好，你可以很簡單的做很多事情。

不幸的是，雖然this非常的強大，但是如果你不是明確的知道他怎么運作的話使用起來還是比較難的。關(guān)于這個我在另一個地方有詳細的討論，在這我在傳統(tǒng)模式下做一些概述。

在傳統(tǒng)模式里this工作如下；注意這個跟內(nèi)聯(lián)模式稍微有些不同。現(xiàn)在this關(guān)鍵字在函數(shù)里，而不是在HTML的參數(shù)上。這個區(qū)別后面會另外講的。

element.onclick = doSomething;<BR>another_element.onclick = doSomething;<BR><BR>function doSomething() {<BR> this.style.backgroundColor = '#cc0000';<BR>}<BR>

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機掃描二維碼進行捐贈