JavaScript Event學習第四章：傳統的事件注冊模型

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

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

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

element.onclick = doSomething;<BR>

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

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

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

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

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

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

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

element.onclick = doSomething;<BR>

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

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

element.onclick = null;<BR>

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

element.onclick()<BR>

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

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

element.fireEvent('onclick')<BR>

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

element.onclick = doSomething();<BR>

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

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

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

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

在傳統模式里this工作如下；注意這個跟內聯模式稍微有些不同。現在this關鍵字在函數里，而不是在HTML的參數上。這個區別后面會另外講的。

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

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈