JavaScript Event學習第三章：早期的事件處理程序

被第二代瀏覽器所支持。

這些古老的瀏覽器只支持一種注冊事件處理程序的方法，這個方法是Netscape發

明的。因為Netscape先發制人，所以如果微軟也想做支持JavaScript事件的瀏覽

器就得跟著Netscape走，所以這里沒有兼容性的問題。所以這種模式在任何支持

JavaScript的瀏覽器都能運行---除了Mac上的IE3，他根本就不支持事件。

注冊事件處理程序
在內聯式的事件注冊模型中，事件處理程序就像是一個HTML元素的屬性，比如：

1 <A HREF="somewhere.html" onClick="alert('I\'ve been clicked!')">

當這個鏈接上發生單擊事件的時候，事件處理程序就被觸發然后執行你的腳本：

一個警告對話框彈出。你也可以觸發一個JavaScript函數：
1 <A HREF="somewhere.html" onClick="doSomething()">

上面兩個例子里面事件的名字的大小寫只是一個習慣問題，HTML是大小寫不敏感

的，所以你想怎么寫都可以。XHTML要求所有的屬性名稱必須都是小寫，所以如果

你使用的XHTML那么名字就要寫成onclick。

不要用他
雖然這種內聯型的注冊模型很古老也很可靠，但是他有一個不足。他要求你在

XHTML結構層里面寫上本不屬于這里的JavaScript代碼。

所以我強烈建議你不要使用這種方法。在這里我有詳細的解釋。

理解這些舊的模型對于JavaScript事件處理的全局感有很大幫助，但是你最好還

是使用我后面說明的現代模式。

默認動作
當年Netscape設置了默認動作也有怎樣防止默認動作運行。他的模式拯救了瀏覽

器大戰和標準的制定，而且到如今都很好的運行著。

眾所周知，當用戶點擊了一個鏈接瀏覽器就會按照href的屬性加載頁面。這是鏈

接上的默認動作。但是當你定義了一個onclick事件處理程序了以后會發生什么呢

？應該能被執行，但是什么時候呢？

1 <A HREF="somewhere.html" onClick="doSomething()">

如果在這個鏈接上單擊，那么事件處理程序一定會被首先執行。畢竟當默認動作

發生--新頁面加載--舊的頁面包括事件處理程序本身都會從內存中清除。如果

onclick的事件處理程序執行了，那么一定是在默認動作之前。

這就有了一個非常重要的原理。如果一個事件同時觸發了默認動作和事件處理程

序，那么：
1、事件處理程序會首先執行
2、默認動作隨后執行
所以在上面的例子中，doSomething()會首先執行，然后瀏覽器會打開鏈接。

阻止默認事件
當這些都確定之后，大家大多開始考慮如何阻止默認事件。在我們的例子中就可

以阻止瀏覽器打開新的頁面。

所以事件處理程序可以返回一個布爾值（ture或者false），false的含義就是“

不要進行默認動作”。這樣我們就可以把例子改成：

1 <A HREF="somewhere.html" onClick="doSomething(); return false">

這個鏈接就不會跟著執行了。這個函數執行之后程序返回false，告訴瀏覽器不要

執行默認動作。

有時候有必要讓函數決定什么時候該執行什么時候不該執行默認動作。所以我們

可以把例子改成：
1 <A HREF="somewhere.html" onClick="return doSomething()"> 

2   

3 function doSomething() 

4 { 

5     return confirm('Do you really want to follow this link?') 

6 }

這就是（非常簡單的）用戶交互。用戶會被問一個問題，如果回答是肯定的那么

函數返回true，如果取消了那么久返回一個false。這個返回值會被事件處理程序

捕獲，然后轉給事件本身。如果是flase那么默認動作就不會被執行--鏈接不會進

入。

然而，不是所有的默認動作都能被阻止。比如unload事件就不行。假設用戶關閉

瀏覽器窗口--觸發了unload事件。如果你能阻止關閉窗口，那么窗口會違背用戶

的意愿而一直打開著么？當然不會。

你可以試試微軟的beforeunload屬性來阻止unload。與其制造一個非?；靵y的情

況讓用戶來選擇確認這個行為。那不如不用。

返回false來阻止默認動作是所有瀏覽器都支持的這是事件處理程序的基本組成。

如今的事件處理程序模型還添加了一些新的方法來阻止默認動作：
W3C給事件添加了preventDefalut()方法。如果你引用了這個方法那么默認動作就

會被阻止。
微軟給事件添加了returnValue屬性。如果你設置他的值為false那么默認動作也

會被阻止。
但是用不著這些個，簡單的返回false就夠了。

 

window.status
這里對于返回false有一個例外。當你設置鼠標經過鏈接的時候改變窗口的狀態欄

以后，你還想阻止默認動作--在狀態欄顯示鏈接地址--的時候，你就應該返回

true：

1 <A HREF="somewhere.html"

2     onMouseOver="window.status = 'This link goes somewhere'; return true">

如果你不這樣做，那么代碼就不會工作。沒人知道那是怎么回事，就是一個比較

怪異的事情。

this
在JavaScript里this關鍵字通常指函數的所有者。如果this指向事件發生的HTML

元素，那么一切都是那么的美好，你可以很簡單的做很多事情。

不幸的是，雖然this非常的強大，但是如果你不是明確的知道他怎么運作的話使

用起來還是比較難的。關于這個我在另一個地方有詳細的討論，在這我在內聯模

式下做一些概述。

在內聯模式下你可以將this作為一個事件處理程序函數的一個參數。所以你可以：
1 <A HREF="somewhere.html" onClick="doSomething(this)"> 

2   

3 function doSomething(obj) 

4 { 

5     // obj now refers to the link 

6 }

你給函數傳遞了一個引用，存儲在obj里面?，F在你不需要在遍歷文檔尋找是哪個

元素被點擊了：他很安全的存儲在變量obj里面?，F在你就可以：
1 <A HREF="somewhere.html" onClick="return doSomething(this)"> 

2 <A HREF="somewhereElse.html" onClick="return doSomething(this)"> 

3   

4 function doSomething(obj) 

5 { 

6     var linkTo = obj.href; 

7     return confirm('Do you really want to follow the link to ' +

linkTo + '?') 

8 }

函數接受到一個鏈接的引用存儲在obj里面?，F在你可以讀取這個鏈接的鏈接地址

然后進行確認。你可以把這個技巧運用在任何一個鏈接上：他總是會顯示你剛才

點擊的那個鏈接的真實地址。