JavaScript event 事件

JavaScript event 即為事件，設計師在程式碼中使用事件處理器（event handlers）來監聽使用者的 Events 行為，通常 Event 會搭配函數來執行某些特定的動作，瀏覽器本身內建的 JavaScript 核心會判斷使用者產生哪些動作，例如點擊動作使用 onclick event 監聽、改變表單中的某個欄位可使用 onchange event 監聽、當滑鼠移過某個區塊可以使用 onmouseover 監聽 ... 等，當查覺到使用者發生的動作，就能夠觸發某一個特定的 function 執行，以上就是 JavaScript event 事件的基本概念，原則上每一個 event 事件在 JavaScript 語法中的標準寫法都是英文字母小寫，除非在 HTML 中使用時不需要顧慮大小寫，否則建議別把 onchange 寫成 onChange，很可能造成 Script 不會執行，另外，JavaScript Event 本身也有簡寫方式，但並非每個瀏覽器都能支援簡寫，建議以標準的寫法為主，以下有幾個參考範例。

JavaScript event 範例一、onclick

範例輸出結果

JavaScript onclick 是使用率非常高的一個 event，範例中準備了一個按鈕（button）並加入一個 onclick 事件的監聽，當選擇這個今天星期幾的按鈕，就會觸發 ShowToday 的 function，透過《取得今天日期》的技巧，將結果 alert 出一個對話視窗。

JavaScript event 範例二、onblur

範例輸出結果

onblur 的意思是當某個元素失焦的時候，什麼是失焦？可以說是當網友的滑鼠游標從該元素移開，瀏覽器會根據網友點選其他元素時，認定原本的元素已經失焦，情況類似網友在填寫某個表單元素，填寫完之後，滑鼠游標點選到下一個欄位繼續填寫資料，這個時候，原本在填寫的那個欄位就產生了失焦的狀態，用 onblur 監聽輸入欄位，將會發現該事件。其實 onblur 不完全是監聽滑鼠移到下一個欄位這麼侷限，而是當滑鼠點選網頁的其他地方都算是原本欄位失焦，以本範例來說，當滑鼠移出欄位就會被 onblur 發現而觸發 TestOnblur 函式。

JavaScript event 範例三、onchange

範例輸出結果

onchange 事件是當一個元素發生改變的時候，例如下拉選單就是一個很容易改變的元素，網友從下拉選單中挑選其他項目的時候，就會被 onchange 監聽到，通常這樣的行為模式，可以用來製作跳頁選單，可參閱此篇範例：JavaScript select onChange 跳頁選單。

JavaScript event 範例四、onmouseover

範例輸出結果

滑鼠移經這裡將改變顏色

onmouseover 是滑鼠事件的其中之一，代表當滑鼠移經某個元素的時候，以此範例來說，當滑鼠移經 DIV 區塊，就會觸發 ChangeBgColor 函數，將 DIV 區塊的背景顏色（background-color）變更，onmouseover 還可以用在網頁中的其他不同元素上。

JavaScript event 常用事件表

Event	說明
onclick	當使用者產生點擊某元素時，例如選擇某的選項或是按鈕（button）。
onchange	當元素發生改變時，例如選擇下拉選單（select option）中的其他項目時。
onblur	當游標失去焦點時，也就是點選其他區域時，通常用於填完表單的一個欄位。
ondblclick	連續兩次 click 某特定元素，通常用於需要特定確認的情況。
onfocus	當網頁元素被鎖定的時候，例如 textarea、input text。
onload	當頁面載入完成後立即觸發 function。
onmousedown	滑鼠事件，當滑鼠的按鍵被按下的時候。
onmouseover	滑鼠事件，當滑鼠游標移經某個元素或區塊時。
onmousemove	滑鼠事件，當滑鼠游標移動時。
onmouseout	滑鼠事件，當滑鼠移出某個元素或區塊時。
onmouseup	滑鼠事件，當滑鼠的按鍵被放開的時候。
onunload	當網友要準備離開網頁的時候。