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。與其製造一個非常混亂的情

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

返回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裡面。現在你不需要在遍曆文檔尋找是哪個

元素被點擊了：他很安全的儲存在變數obj裡面。現在你就可以：
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裡面。現在你可以讀取這個連結的連結地址

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

點擊的那個連結的真真實位址。