JavaScript Event學習第四章 傳統的事件注冊模型
2024-05-06 14:11:37
供稿:網友
在最古老的JavaScript瀏覽器里注冊事件只能通過內聯模式。自從DHTML從根本上改變了你操作頁面的方法,事件的注冊就必須有擴展性而且要有很強的適應性。所以就必須有相應的事件模型。Netscape在第三代瀏覽器中就開始了,IE在第四代瀏覽器開始。
因為Netscape 3就開始支持這種新的事件注冊模型,在瀏覽器戰爭前就是事實上的標準。所以微軟不得不也是最后一次為了網上那些數不清的使用了Netscape事件處理模型的頁面在兼容性上做出了讓步。
所以這兩個瀏覽器,事實上也是所有的瀏覽器都支持下面的代碼:
代碼如下:
element.onclick = doSomething;
這是注冊一個事件的最好的辦法。無論什么時候用戶點擊了這個HTML元素,那么doSomething()都會執行。這是唯一一個能夠跨瀏覽的注冊事件的最好的辦法,深刻的理解這個模型和他的限制也是非常重要的。
因為沒有官方的標準,所以我暫且稱為傳統事件注冊模型(traditional event registration model)。同時,w3c也標準化了事件注冊,微軟也推出了高級模式,但是傳統模式依然能很好的運行。
高級事件注冊程序
從Netscape 3/IE 4開始,JavaScript能夠識別元素上的一系列事件的屬性。大多數HTML元素都有onclick,onmouseover,onkeypress等等屬性。那些元素有哪些屬性--哪些元素支持哪些事件--都依賴于瀏覽器。
這些屬性對于他們本身也不是什么新穎的東西。在最古老的JavaScript瀏覽器里面就已經存在了。
代碼如下:
<a href="somewhere.html" onclick="doSomething()">
這里的A標簽就有一個onclick參數,在JavaScript里面就成為了A元素的屬性。那些古老的瀏覽器的事件處理程序只能通過在頁面源代碼里面設置元素的參數這個辦法來注冊。如果你想讓這個腳本在所有的A標簽執行,那么你就需要再所有的鏈接上面加上onclick事件。
有了傳統事件注冊模型的到來,這些onclick,onmouseover或者HTML元素的其他事件處理就都可以通過JavaScript來注冊了。現在你可以添加、修改或者刪除一些事件處理程序而不用動HTML的一絲一毫。當你通過DOM來訪問HTML元素的時候你就可以像下面這樣寫代碼了:
代碼如下:
element.onclick = doSomething;
現在我們的示例函數doSomething()就注冊在了element元素的onclick屬性上,而且當用戶點擊了這個元素函數就會執行。注意事件的名字必須都是小寫。
刪除這個事件處理程序,只要簡單的讓點擊事件為空就行了:
代碼如下:
element.onclick = null;
事件處理程序跟普通的JavaScript函數一樣。即使事件沒有發生的時候他也能執行。如果你則這樣寫:
代碼如下:
element.onclick()
那么doSomething一樣會執行。雖然如果是一個不知道做什么或者產生錯誤的函數,這也沒有真實的事件發生。所以這是一種很少用來執行事件處理程序的方法。