JavaScript入門教程(11) js事件處理
更新時(shí)間：2009年01月31日 23:42:42 作者：
事件處理是對象化編程的一個(gè)很重要的環(huán)節(jié)，沒有了事件處理，程序就會變得很死，缺乏靈活性。
事件處理概述
事件處理是對象化編程的一個(gè)很重要的環(huán)節(jié)，沒有了事件處理，程序就會變得很死，缺乏靈活性。事件處理的過程可以這樣表示：發(fā)生事件 - 啟動(dòng)事件處理程序 - 事件處理程序作出反應(yīng)。其中，要使事件處理程序能夠啟動(dòng)，必須先告訴對象，如果發(fā)生了什么事情，要啟動(dòng)什么處理程序，否則這個(gè)流程就不能進(jìn)行下去。事件的處理程序可以是任意 JavaScript 語句，但是我們一般用特定的自定義函數(shù)（function）來處理事情。
指定事件處理程序有三種方法：
方法一 直接在 HTML 標(biāo)記中指定。這種方法是用得最普遍的。方法是：
<標(biāo)記 ... ... 事件="事件處理程序" [事件="事件處理程序" ...]>
讓我們來看看例子：
<body ... onload="alert('網(wǎng)頁讀取完成，請慢慢欣賞！')" onunload="alert('再見！')">
這樣的定義<body>標(biāo)記，能使文檔讀取完畢的時(shí)候彈出一個(gè)對話框，寫著“網(wǎng)頁讀取完成，請慢慢欣賞”；在用戶退出文檔（或者關(guān)閉窗口，或者到另一個(gè)頁面去）的時(shí)候彈出“再見”。
方法二 編寫特定對象特定事件的 JavaScript。這種方法用得比較少，但是在某些場合還是很好用的。方法是：
<script language="JavaScript" for="對象" event="事件">
...
(事件處理程序代碼)
...
</script>
<script language="JavaScript" for="window" event="onload">
alert('網(wǎng)頁讀取完成，請慢慢欣賞！');
</script>
方法三 在 JavaScript 中說明。方法：
<事件主角 - 對象>.<事件> = <事件處理程序>;
用這種方法要注意的是，“事件處理程序”是真正的代碼，而不是字符串形式的代碼。如果事件處理程序是一個(gè)自定義函數(shù)，如無使用參數(shù)的需要，就不要加“()”。
function ignoreError() {
return true;
}
window.onerror = ignoreError; // 沒有使用“()”
這個(gè)例子將 ignoreError() 函數(shù)定義為 window 對象的 onerror 事件的處理程序。它的效果是忽略該 window 對象下任何錯(cuò)誤（由引用不允許訪問的 location 對象產(chǎn)生的“沒有權(quán)限”錯(cuò)誤是不能忽略的）。
事件詳解
onblur 事件 發(fā)生在窗口失去焦點(diǎn)的時(shí)候。應(yīng)用于：window 對象
onchange 事件 發(fā)生在文本輸入?yún)^(qū)的內(nèi)容被更改，然后焦點(diǎn)從文本輸入?yún)^(qū)移走之后。捕捉此事件主要用于實(shí)時(shí)檢測輸入的有效性，或者立刻改變文檔內(nèi)容。應(yīng)用于：Password 對象；Select 對象；Text 對象；Textarea 對象
onclick 事件 發(fā)生在對象被單擊的時(shí)候。單擊是指鼠標(biāo)停留在對象上，按下鼠標(biāo)鍵，沒有移動(dòng)鼠標(biāo)而放開鼠標(biāo)鍵這一個(gè)完整的過程。一個(gè)普通按鈕對象（Button）通常會有 onclick 事件處理程序，因?yàn)檫@種對象根本不能從用戶那里得到任何信息，沒有 onclick 事件處理程序就等于廢柴。按鈕上添加 onclick 事件處理程序，可以模擬“另一個(gè)提交按鈕”，方法是：在事件處理程序中更改表單的 action, target, encoding, method 等一個(gè)或幾個(gè)屬性，然后調(diào)用表單的 submit() 方法。在 Link 對象的 onclick 事件處理程序中返回 false 值（return false），能阻止瀏覽器打開此連接。即，如果有一個(gè)這樣的連接：<a href="www.a.com 網(wǎng)站，除非用戶禁止瀏覽器運(yùn)行 JavaScript。應(yīng)用于：Button 對象；Checkbox 對象；Image 對象；Link 對象；Radio 對象；Reset 對象；Submit 對象
onerror 事件 發(fā)生在錯(cuò)誤發(fā)生的時(shí)候。它的事件處理程序通常就叫做“錯(cuò)誤處理程序”(Error Handler)，用來處理錯(cuò)誤。上邊已經(jīng)介紹過，要忽略一切錯(cuò)誤，就使用：
function ignoreError() {
return true;
}
window.onerror = ignoreError;
應(yīng)用于：window 對象
onfocus 事件 發(fā)生在窗口得到焦點(diǎn)的時(shí)候。應(yīng)用于：window 對象
onload 事件 發(fā)生在文檔全部下載完畢的時(shí)候。全部下載完畢意味著不但 HTML 文件，而且包含的圖片，插件，控件，小程序等全部內(nèi)容都下載完畢。本事件是 window 的事件，但是在 HTML 中指定事件處理程序的時(shí)候，我們是把它寫在<body>標(biāo)記中的。應(yīng)用于：window 對象
onmousedown 事件 發(fā)生在用戶把鼠標(biāo)放在對象上按下鼠標(biāo)鍵的時(shí)候。參考 onmouseup 事件。應(yīng)用于：Button 對象；Link 對象
onmouseout 事件 發(fā)生在鼠標(biāo)離開對象的時(shí)候。參考 onmouseover 事件。應(yīng)用于：Link 對象
onmouseover 事件 發(fā)生在鼠標(biāo)進(jìn)入對象范圍的時(shí)候。這個(gè)事件和 onmouseout 事件，再加上圖片的預(yù)讀，就可以做到當(dāng)鼠標(biāo)移到圖像連接上，圖像更改的效果了。有時(shí)我們看到，在指向一個(gè)連接時(shí)，狀態(tài)欄上不顯示地址，而顯示其它的資料，看起來這些資料是可以隨時(shí)更改的。它們是這樣做出來的：
<a href="..." onmouseover="window.status='Click Me Please!'; return true;" onmouseout="window.status=''; return true;">
應(yīng)用于：Link 對象
onmouseup 事件 發(fā)生在用戶把鼠標(biāo)放在對象上鼠標(biāo)鍵被按下的情況下，放開鼠標(biāo)鍵的時(shí)候。如果按下鼠標(biāo)鍵的時(shí)候，鼠標(biāo)并不在放開鼠標(biāo)的對象上，則本事件不會發(fā)生。應(yīng)用于：Button 對象；Link 對象
onreset 事件 發(fā)生在表單的“重置”按鈕被單擊（按下并放開）的時(shí)候。通過在事件處理程序中返回 false 值（return false）可以阻止表單重置。應(yīng)用于：Form 對象
onresize 事件 發(fā)生在窗口被調(diào)整大小的時(shí)候。應(yīng)用于：window 對象
onsubmit 事件 發(fā)生在表單的“提交”按鈕被單擊（按下并放開）的時(shí)候?？梢允褂迷撌录眚?yàn)證表單的有效性。通過在事件處理程序中返回 false 值（return false）可以阻止表單提交。應(yīng)用于：Form 對象
onunload 事件 發(fā)生在用戶退出文檔（或者關(guān)閉窗口，或者到另一個(gè)頁面去）的時(shí)候。與 onload 一樣，要寫在 HTML 中就寫到<body>標(biāo)記里?！ ∮械?Web Masters 用這個(gè)方法來彈出“調(diào)查表單”，以“強(qiáng)迫”來者填寫；有的就彈出廣告窗口，唆使來者點(diǎn)擊連接。我覺得這種“onunload="open..."”的方法很不好，有時(shí)甚至?xí)驗(yàn)閺棾鎏啻翱诙鴮?dǎo)致資源缺乏。有什么對來者說就應(yīng)該在網(wǎng)頁上說完，不對嗎？ 應(yīng)用于：window 對象
事件處理是對象化編程的一個(gè)很重要的環(huán)節(jié)，沒有了事件處理，程序就會變得很死，缺乏靈活性。事件處理的過程可以這樣表示：發(fā)生事件 - 啟動(dòng)事件處理程序 - 事件處理程序作出反應(yīng)。其中，要使事件處理程序能夠啟動(dòng)，必須先告訴對象，如果發(fā)生了什么事情，要啟動(dòng)什么處理程序，否則這個(gè)流程就不能進(jìn)行下去。事件的處理程序可以是任意 JavaScript 語句，但是我們一般用特定的自定義函數(shù)（function）來處理事情。
指定事件處理程序有三種方法：
方法一 直接在 HTML 標(biāo)記中指定。這種方法是用得最普遍的。方法是：
復(fù)制代碼 代碼如下:
<標(biāo)記 ... ... 事件="事件處理程序" [事件="事件處理程序" ...]>
讓我們來看看例子：
復(fù)制代碼 代碼如下:
<body ... onload="alert('網(wǎng)頁讀取完成，請慢慢欣賞！')" onunload="alert('再見！')">
這樣的定義<body>標(biāo)記，能使文檔讀取完畢的時(shí)候彈出一個(gè)對話框，寫著“網(wǎng)頁讀取完成，請慢慢欣賞”；在用戶退出文檔（或者關(guān)閉窗口，或者到另一個(gè)頁面去）的時(shí)候彈出“再見”。
方法二 編寫特定對象特定事件的 JavaScript。這種方法用得比較少，但是在某些場合還是很好用的。方法是：
復(fù)制代碼 代碼如下:
<script language="JavaScript" for="對象" event="事件">
...
(事件處理程序代碼)
...
</script>
復(fù)制代碼 代碼如下:
<script language="JavaScript" for="window" event="onload">
alert('網(wǎng)頁讀取完成，請慢慢欣賞！');
</script>
方法三 在 JavaScript 中說明。方法：
<事件主角 - 對象>.<事件> = <事件處理程序>;
用這種方法要注意的是，“事件處理程序”是真正的代碼，而不是字符串形式的代碼。如果事件處理程序是一個(gè)自定義函數(shù)，如無使用參數(shù)的需要，就不要加“()”。
function ignoreError() {
return true;
}
window.onerror = ignoreError; // 沒有使用“()”
這個(gè)例子將 ignoreError() 函數(shù)定義為 window 對象的 onerror 事件的處理程序。它的效果是忽略該 window 對象下任何錯(cuò)誤（由引用不允許訪問的 location 對象產(chǎn)生的“沒有權(quán)限”錯(cuò)誤是不能忽略的）。
事件詳解
onblur 事件 發(fā)生在窗口失去焦點(diǎn)的時(shí)候。應(yīng)用于：window 對象
onchange 事件 發(fā)生在文本輸入?yún)^(qū)的內(nèi)容被更改，然后焦點(diǎn)從文本輸入?yún)^(qū)移走之后。捕捉此事件主要用于實(shí)時(shí)檢測輸入的有效性，或者立刻改變文檔內(nèi)容。應(yīng)用于：Password 對象；Select 對象；Text 對象；Textarea 對象
onclick 事件 發(fā)生在對象被單擊的時(shí)候。單擊是指鼠標(biāo)停留在對象上，按下鼠標(biāo)鍵，沒有移動(dòng)鼠標(biāo)而放開鼠標(biāo)鍵這一個(gè)完整的過程。一個(gè)普通按鈕對象（Button）通常會有 onclick 事件處理程序，因?yàn)檫@種對象根本不能從用戶那里得到任何信息，沒有 onclick 事件處理程序就等于廢柴。按鈕上添加 onclick 事件處理程序，可以模擬“另一個(gè)提交按鈕”，方法是：在事件處理程序中更改表單的 action, target, encoding, method 等一個(gè)或幾個(gè)屬性，然后調(diào)用表單的 submit() 方法。在 Link 對象的 onclick 事件處理程序中返回 false 值（return false），能阻止瀏覽器打開此連接。即，如果有一個(gè)這樣的連接：<a href="www.a.com 網(wǎng)站，除非用戶禁止瀏覽器運(yùn)行 JavaScript。應(yīng)用于：Button 對象；Checkbox 對象；Image 對象；Link 對象；Radio 對象；Reset 對象；Submit 對象
onerror 事件 發(fā)生在錯(cuò)誤發(fā)生的時(shí)候。它的事件處理程序通常就叫做“錯(cuò)誤處理程序”(Error Handler)，用來處理錯(cuò)誤。上邊已經(jīng)介紹過，要忽略一切錯(cuò)誤，就使用：
復(fù)制代碼 代碼如下:
function ignoreError() {
return true;
}
window.onerror = ignoreError;
應(yīng)用于：window 對象
onfocus 事件 發(fā)生在窗口得到焦點(diǎn)的時(shí)候。應(yīng)用于：window 對象
onload 事件 發(fā)生在文檔全部下載完畢的時(shí)候。全部下載完畢意味著不但 HTML 文件，而且包含的圖片，插件，控件，小程序等全部內(nèi)容都下載完畢。本事件是 window 的事件，但是在 HTML 中指定事件處理程序的時(shí)候，我們是把它寫在<body>標(biāo)記中的。應(yīng)用于：window 對象
onmousedown 事件 發(fā)生在用戶把鼠標(biāo)放在對象上按下鼠標(biāo)鍵的時(shí)候。參考 onmouseup 事件。應(yīng)用于：Button 對象；Link 對象
onmouseout 事件 發(fā)生在鼠標(biāo)離開對象的時(shí)候。參考 onmouseover 事件。應(yīng)用于：Link 對象
onmouseover 事件 發(fā)生在鼠標(biāo)進(jìn)入對象范圍的時(shí)候。這個(gè)事件和 onmouseout 事件，再加上圖片的預(yù)讀，就可以做到當(dāng)鼠標(biāo)移到圖像連接上，圖像更改的效果了。有時(shí)我們看到，在指向一個(gè)連接時(shí)，狀態(tài)欄上不顯示地址，而顯示其它的資料，看起來這些資料是可以隨時(shí)更改的。它們是這樣做出來的：
<a href="..." onmouseover="window.status='Click Me Please!'; return true;" onmouseout="window.status=''; return true;">
應(yīng)用于：Link 對象
onmouseup 事件 發(fā)生在用戶把鼠標(biāo)放在對象上鼠標(biāo)鍵被按下的情況下，放開鼠標(biāo)鍵的時(shí)候。如果按下鼠標(biāo)鍵的時(shí)候，鼠標(biāo)并不在放開鼠標(biāo)的對象上，則本事件不會發(fā)生。應(yīng)用于：Button 對象；Link 對象
onreset 事件 發(fā)生在表單的“重置”按鈕被單擊（按下并放開）的時(shí)候。通過在事件處理程序中返回 false 值（return false）可以阻止表單重置。應(yīng)用于：Form 對象
onresize 事件 發(fā)生在窗口被調(diào)整大小的時(shí)候。應(yīng)用于：window 對象
onsubmit 事件 發(fā)生在表單的“提交”按鈕被單擊（按下并放開）的時(shí)候?？梢允褂迷撌录眚?yàn)證表單的有效性。通過在事件處理程序中返回 false 值（return false）可以阻止表單提交。應(yīng)用于：Form 對象
onunload 事件 發(fā)生在用戶退出文檔（或者關(guān)閉窗口，或者到另一個(gè)頁面去）的時(shí)候。與 onload 一樣，要寫在 HTML 中就寫到<body>標(biāo)記里?！ ∮械?Web Masters 用這個(gè)方法來彈出“調(diào)查表單”，以“強(qiáng)迫”來者填寫；有的就彈出廣告窗口，唆使來者點(diǎn)擊連接。我覺得這種“onunload="open..."”的方法很不好，有時(shí)甚至?xí)驗(yàn)閺棾鎏啻翱诙鴮?dǎo)致資源缺乏。有什么對來者說就應(yīng)該在網(wǎng)頁上說完，不對嗎？ 應(yīng)用于：window 對象
您可能感興趣的文章:
- 用JavaScript事件串連執(zhí)行多個(gè)處理過程的方法
- JavaScript中的事件處理
- Ext javascript建立超鏈接，進(jìn)行事件處理的實(shí)現(xiàn)方法
- js event事件的傳遞與冒泡處理
- javascript 處理事件綁定的一些兼容寫法
- 淺談Javascript事件處理程序的幾種方式
- js onload處理html頁面加載之后的事件
- 引用其它js時(shí)如何同時(shí)處理多個(gè)window.onload事件
- 輕松創(chuàng)建nodejs服務(wù)器（5）：事件處理程序
- 詳細(xì)解讀JavaScript的跨瀏覽器事件處理
- 詳解javascript中的事件處理
- JavaScript事件處理的方式(三種)
相關(guān)文章
javascript 構(gòu)造函數(shù)方式定義對象
這篇文章主要介紹了javascript 構(gòu)造函數(shù)方式定義對象的方法及示例,需要的朋友可以參考下2015-01-01
本文給大家詳細(xì)講解了JavaScript中的字符集，以及字符集的編碼與解碼的相關(guān)知識，非常的細(xì)致，有需要的小伙伴可以參考下2017-02-02
這篇文章介紹了C#中對象與JSON字符串互相轉(zhuǎn)換的三種方式，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
這篇文章主要介紹了在JavaScript中使用NaN值的方法,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了理解javascript回調(diào)函數(shù)的相關(guān)資料,需要的朋友可以參考下2014-12-12
jquery簡單體驗(yàn)...2007-01-01
JavaScript進(jìn)階教程(第二課)...2007-04-04
JavaScript使用過程中需要注意的地方和一些基本語法，需要的朋友可以參考下。2010-08-08
「中高級前端面試」JavaScript手寫代碼無敵秘籍（推薦）
這篇文章主要介紹了JavaScript手寫代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了js的Map函數(shù)使用方法詳解,需要的朋友可以參考下2022-01-01