事件處理概述
事件處理是對象化編程的一個很重要的環節,沒有了事件處理,程序就會變得很死,缺乏靈活性。事件處理的過程可以這樣表示:發生事件 - 啟動事件處理程序 - 事件處理程序作出反應。其中,要使事件處理程序能夠啟動,必須先告訴對象,如果發生了什麼事情,要啟動什麼處理程序,否則這個流程就不能進行下去。事件的處理程序可以是任意 JavaScript 語句,但是我們一般用特定的自定義函數(function)來處理事情。
指定事件處理程序有三種方法:
方法一 直接在 HTML 標記中指定。這種方法是用得最普遍的。方法是:
<標記 ... ... 事件="事件處理程序" [事件="事件處理程序" ...]>
讓我們來看看例子:
<body ... onload="alert('網頁讀取完成,請慢慢欣賞!')" onunload="alert('再見!')">
這樣的定義<body>標記,能使文檔讀取完畢的時候彈出一個對話框,寫著“網頁讀取完成,請慢慢欣賞”;在用戶退出文檔(或者關閉窗口,或者到另一個頁面去)的時候彈出“再見”。
方法二 編寫特定對象特定事件的 JavaScript。這種方法用得比較少,但是在某些場合還是很好用的。方法是:
<script language="JavaScript" for="對象" event="事件">
...
(事件處理程序代碼)
...
</script>
<script language="JavaScript" for="window" event="onload">
alert('網頁讀取完成,請慢慢欣賞!');
</script>
方法三 在 JavaScript 中說明。方法:
<事件主角 - 對象>.<事件> = <事件處理程序>;
用這種方法要注意的是,“事件處理程序”是真正的代碼,而不是字符串形式的代碼。如果事件處理程序是一個自定義函數,如無使用參數的需要,就不要加“()”。
function ignoreError() {
return true;
}
window.onerror = ignoreError; // 沒有使用“()”
這個例子將 ignoreError() 函數定義為 window 對象的 onerror 事件的處理程序。它的效果是忽略該 window 對象下任何錯誤(由引用不允許訪問的 location 對象產生的“沒有權限”錯誤是不能忽略的)。
事件詳解
onblur 事件 發生在窗口失去焦點的時候。應用於:window 對象
onchange 事件 發生在文本輸入區的內容被更改,然後焦點從文本輸入區移走之後。捕捉此事件主要用於實時檢測輸入的有效性,或者立刻改變文檔內容。應用於:Password 對象;Select 對象;Text 對象;Textarea 對象
onclick 事件 發生在對象被單擊的時候。單擊是指鼠標停留在對象上,按下鼠標鍵,沒有移動鼠標而放開鼠標鍵這一個完整的過程。一個普通按鈕對象(Button)通常會有 onclick 事件處理程序,因為這種對象根本不能從用戶那裡得到任何信息,沒有 onclick 事件處理程序就等於廢柴。按鈕上添加 onclick 事件處理程序,可以模擬“另一個提交按鈕”,方法是:在事件處理程序中更改表單的 action, target, encoding, method 等一個或幾個屬性,然後調用表單的 submit() 方法。在 Link 對象的 onclick 事件處理程序中返回 false 值(return false),能阻止浏覽器打開此連接。即,如果有一個這樣的連接:<a href="http://www.a.com" onclick="return false">Go!</a>,那麼無論用戶怎樣點擊,都不會去到 www.a.com 網站,除非用戶禁止浏覽器運行 JavaScript。應用於:Button 對象;Checkbox 對象;Image 對象;Link 對象;Radio 對象;Reset 對象;Submit 對象
onerror 事件 發生在錯誤發生的時候。它的事件處理程序通常就叫做“錯誤處理程序”(Error Handler),用來處理錯誤。上邊已經介紹過,要忽略一切錯誤,就使用:
function ignoreError() {
return true;
}
window.onerror = ignoreError;
應用於:window 對象
onfocus 事件 發生在窗口得到焦點的時候。應用於:window 對象
onload 事件 發生在文檔全部下載完畢的時候。全部下載完畢意味著不但 HTML 文件,而且包含的圖片,插件,控件,小程序等全部內容都下載完畢。本事件是 window 的事件,但是在 HTML 中指定事件處理程序的時候,我們是把它寫在<body>標記中的。應用於:window 對象
onmousedown 事件 發生在用戶把鼠標放在對象上按下鼠標鍵的時候。參考 onmouseup 事件。應用於:Button 對象;Link 對象
onmouseout 事件 發生在鼠標離開對象的時候。參考 onmouseover 事件。應用於:Link 對象
onmouseover 事件 發生在鼠標進入對象范圍的時候。這個事件和 onmouseout 事件,再加上圖片的預讀,就可以做到當鼠標移到圖像連接上,圖像更改的效果了。有時我們看到,在指向一個連接時,狀態欄上不顯示地址,而顯示其它的資料,看起來這些資料是可以隨時更改的。它們是這樣做出來的:
<a href="..." onmouseover="window.status='Click Me Please!'; return true;" onmouseout="window.status=''; return true;">
應用於:Link 對象
onmouseup 事件 發生在用戶把鼠標放在對象上鼠標鍵被按下的情況下,放開鼠標鍵的時候。如果按下鼠標鍵的時候,鼠標並不在放開鼠標的對象上,則本事件不會發生。應用於:Button 對象;Link 對象
onreset 事件 發生在表單的“重置”按鈕被單擊(按下並放開)的時候。通過在事件處理程序中返回 false 值(return false)可以阻止表單重置。應用於:Form 對象
onresize 事件 發生在窗口被調整大小的時候。應用於:window 對象
onsubmit 事件 發生在表單的“提交”按鈕被單擊(按下並放開)的時候。可以使用該事件來驗證表單的有效性。通過在事件處理程序中返回 false 值(return false)可以阻止表單提交。應用於:Form 對象
onunload 事件 發生在用戶退出文檔(或者關閉窗口,或者到另一個頁面去)的時候。與 onload 一樣,要寫在 HTML 中就寫到<body>標記裡。 有的 Web Masters 用這個方法來彈出“調查表單”,以“強迫”來者填寫;有的就彈出廣告窗口,唆使來者點擊連接。我覺得這種“onunload="open..."”的方法很不好,有時甚至會因為彈出太多窗口而導致資源缺乏。有什麼對來者說就應該在網頁上說完,不對嗎? 應用於:window 對象