JavaScript中的事件處理

時間 2020-02-03

原文原文鏈接

事件處理概述
　　事件處理是對象化編程的一個很重要的環節，沒有了事件處理，程序就會變得很死，缺少靈活性。事件處理的過程能夠這樣表示：發生事件 - 啓動事件處理程序 - 事件處理程序做出反應。其中，要使事件處理程序可以啓動，必須先告訴對象，若是發生了什麼事情，要啓動什麼處理程序，不然這個流程就不能進行下去。事件的處理程序能夠是任意 JavaScript 語句，可是咱們通常用特定的自定義函數（function）來處理事情。
指定事件處理程序有三種方法：
方法一直接在 HTML 標記中指定。這種方法是用得最廣泛的。方法是：編程

<標記 ... ... 事件="事件處理程序" [事件="事件處理程序" ...]>

讓咱們來看看例子：小程序

<body ... onunload="alert('再見！')">

這樣的定義<body>標記，能使文檔讀取完畢的時候彈出一個對話框，寫着「網頁讀取完成，請慢慢欣賞」；在用戶退出文檔（或者關閉窗口，或者到另外一個頁面去）的時候彈出「再見」。
方法二編寫特定對象特定事件的 JavaScript。這種方法用得比較少，可是在某些場合仍是很好用的。方法是：瀏覽器

<script language="JavaScript" for="對象" event="事件">
...
(事件處理程序代碼)
...
</script>

<script language="JavaScript" for="window" event="onload">
alert('網頁讀取完成，請慢慢欣賞！');
</script>

方法三在 JavaScript 中說明。方法：ide

<事件主角 - 對象>.<事件> = <事件處理程序>;

用這種方法要注意的是，「事件處理程序」是真正的代碼，而不是字符串形式的代碼。若是事件處理程序是一個自定義函數，如無使用參數的須要，就不要加「()」。函數

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" 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 對象
事件發生在用戶把鼠標放在對象上按下鼠標鍵的時候。參考事件。應用於：Button 對象；Link 對象
事件發生在鼠標離開對象的時候。參考事件。應用於：Link 對象
事件發生在鼠標進入對象範圍的時候。這個事件和事件，再加上圖片的預讀，就能夠作到當鼠標移到圖像鏈接上，圖像更改的效果了。有時咱們看到，在指向一個鏈接時，狀態欄上不顯示地址，而顯示其它的資料，看起來這些資料是能夠隨時更改的。它們是這樣作出來的：
<a href="..." onmouseover="window.status='Click Me Please!'; return true;" onmouseout="window.status=''; return true;">
應用於：Link 對象
事件發生在用戶把鼠標放在對象上鼠標鍵被按下的狀況下，放開鼠標鍵的時候。若是按下鼠標鍵的時候，鼠標並不在放開鼠標的對象上，則本事件不會發生。應用於：Button 對象；Link 對象
onreset 事件發生在表單的「重置」按鈕被單擊（按下並放開）的時候。經過在事件處理程序中返回 false 值（return false）能夠阻止表單重置。應用於：Form 對象
onresize 事件發生在窗口被調整大小的時候。應用於：window 對象
onsubmit 事件發生在表單的「提交」按鈕被單擊（按下並放開）的時候。可使用該事件來驗證表單的有效性。經過在事件處理程序中返回 false 值（return false）能夠阻止表單提交。應用於：Form 對象
onunload 事件發生在用戶退出文檔（或者關閉窗口，或者到另外一個頁面去）的時候。與 onload 同樣，要寫在 HTML 中就寫到<body>標記裏。　　有的 Web Masters 用這個方法來彈出「調查表單」，以「強迫」來者填寫；有的就彈出廣告窗口，挑撥來者點擊鏈接。我以爲這種「onunload="open..."」的方法很很差，有時甚至會由於彈出太多窗口而致使資源缺少。有什麼對來者說就應該在網頁上說完，不對嗎？　應用於：window 對象