JavaScript的事件

事件 (Event)
事件是由系統轉化使用者的動作或系統訊息而得來的。使用者的動作例子包括：按下滑鼠鍵、確定送出表單...等。

在一個網頁內，事件通常是指由瀏覽器所偵測到使用者的特定動作，瀏覽器可以根據所偵測到的事件，來進行相關動作。舉例來說，使用者點選或移動滑鼠，或是瀏覽器的載入網頁，都可以看成是事件的產生。對於特定的事件，我們可以在瀏覽器內偵測得之，並以特定的程式來對此事件做出反應，此程式即稱為「事件處理器」(Event handlers)，又稱為 Callback。

事件處理的好處就是不用在主程式內檢查某事件有否發生，我們只須把要做的工作連繫到事件，當某事件真的發生了，系統就自動把這個訊息送到程式，那就會自動執行要做的工作了。JavaScript 的事件處理者通常是連繫著物件的，因此不同的物件就支援不同的事件處理者。以下是 JavaScript 常用的事件處理器：

事件處理器	事件發生於
onBlur	使用者離開某一欄，失去焦點時
onChange	使用者改變某一欄的內容，改變物件選項或字串時
onClick	使用者按下某個按鈕，點選某一個物件時
onFocus	使用者的輸入焦點進入某一欄，得到焦點時
onLoad	某一頁完全載入，瀏覽器載入網頁時
onMouseOver	滑鼠游標在某個物件之上
onMouseOut	滑鼠游標離開某個物件
onMouseup	鬆開滑鼠按鈕時
onMouseDown	按下滑鼠按鈕時
onSelect	使用者選擇某一欄的內容
onSubmit	使用者確定送出某表單
onUnload	正在顯示的一頁被改變，瀏覽器離開網頁時

把函數指定到事件：
我們通常把那些在某事件發生後要做的工作寫成一個函數，不過如果你的工作很簡單，可以不用寫在函數內。
語法：把事件處理者寫成一個物件的 HTML 標記屬性，而屬性內容就是要執行的 JavaScript 敘述
<HtmlTag event_handler="statements">

程式範例（使用事件處理器執行函數）：
<script>
function bt_details(this_bt) {
var name = this_bt.name
var value = this_bt.value
var type = this_bt.type
document.write("My name is <b>" + name + "</b>");
document.write("<br>My value is <b>" + value + "</b>");
document.write("<br>My type is <b>" + type + "</b>");
}
</script>
<form>
<input type="button" name="hello"
value="Please Click me to see my name and value"
onClick="bt_details(this)">
</form>

例子說明：
onClick="bt_details(this)"
首先為大家介紹一個關鍵字 this ， this 其實是一個物件，它是指當時正在使用中的物件。例子中的 this 是在 input 的 HTML 標記範圍內，因此 this 就是指那個 input 物件了，那個 input 物件有 type、name 和 value 三個屬性，因此 this 也有這三個屬性了。用 this 的好處就是不用知道該物件的名稱也可以使用該物件。

onClick 是一個事件處理者，當使用者按下按鈕時，就會自動執行 onClick 屬性內容的 JavaScript 敘述。
bt_details(this) 是一個函數，輸入的參數就是一個物件 this ，亦即是該個 input 物件。
function bt_details(this_bt)
參數 this 會輸入到 this_bt 變數，成為一個物件型態的變數，而這個變數就儲存著該個 input 物件了，因此 this_bt 也有 type、name 和 value 三個屬性。
type="button"
JavaScript 定義了一個新的 <input> 類別 (Type)，名叫 button ，是一個普通的按鈕



終止事件：
你可以中途停止一個函數或事件。一般情況下都會用 return false; 來終止程序，但在處理連結物件或送出表單時， true 和 false 就有分別了，這點稍後會詳述。

語法：終止函數
return false;或是
return true;


程式範例（終止函數return false）：
<script>
function terminate() {
document.write("Before <b>return false;</b>");
return false;
document.write("After <b>return false;</b>");
}
</script>
<form>
<input type="button" value="hello" onClick="terminate()">
</form>


例子說明：
第二句的 document.write 不會被執行，因為上一句 return false 己經中終止了 terminate 函數。

程式範例（終止函數return true）：
<a href="index.html"
onMouseOver="window.status = 'Mouse pointer is over a link' ; return true"
onMouseOut="window.status = 'Mouse pointer is moved out' ; return true">
Please move your mouse pointer over me and notice the status bar.
</a>

例子說明：
onMouseOver 和 onMouseOut
當滑鼠游標在某個連結之上時，通常瀏覽器的狀態列 (Status Bar) 就會顯示該連結的位置，當游標離開時，狀態列就會顯示預設的文字。這兩個事件處者是用來當滑鼠移到或離開連結時，改變狀態列的文字。

window.status
window 是視窗物件，表示正在使用的視窗，而 status 就是該視窗的屬性，它儲存著視窗的狀態列文字。

return true
return true 是用來表示該連結已經被跟進 (follow)，那麼瀏覽器就不會把連結位置顯示在狀態列，否則，我們想顯示的文字就會被連結位置蓋過了。

留意例子中在一句內同時用了雙引號和單引號，目的是希望 HTML 的屬性內容不會和 window.status 的內容混淆。


常用事件列表：

滑鼠事件的列表

滑鼠事件	說明
onmousedown	A mouse button has been pressed
onmousemove	The mouse has been moved
onmouseout	The mouse pointer has left an element
onmouseover	The mouse pointer has entered an element
onmouseup	A mouse button has been released
onclick	A mouse button has been clicked
ondblclick	A mouse button has been double-clicked (clicked twice rapidly)

鍵盤事件的列表

鍵盤事件	說明
onkeydown	A key has been pressed
onkeypress	onkeydown followed by onkeyup
onkeyup	A key has been released

常用的其他事件的列表

事件名稱	說明
onblur	An element loses focus
onerror	An error occurs
onfocus	An element gains focus
onload	The document has completely loaded
onreset	A form reset command is issued
onscroll	The document is scrolled
onselect	The selection of element has changed
onsubmit	A form submit command is issued

各種產生事件的物件常用的相關性質

產生事件之物件的性質	說明
SrcElement	The element that fired the event
type	Type of event
returnValue	Determines whether the event is cancelled
cancelBubble	Can cancel an event bubble
clientX	Mouse pointer X coordinate relative to window
clientY	Mouse pointer Y coordinate relative to window
offsetX	Mouse pointer X coordinate relative to element that fired the event
offsetY	Mouse pointer Y coordinate relative to element that fired the event
button	Any mouse buttons that are pressed
altKey	True if the alt key was also pressed
ctrlKey	True if the ctrl key was also pressed
shiftKey	True if the shift key was also pressed
keyCode	Returns UniCode value of key pressed

event.button 隨滑鼠的按鍵不同而有不同的值

event.button 的值	說明
1	滑鼠左鍵被按下
2	滑鼠右鍵被按下
4	滑鼠中鍵被按下