事件 (Event)
事件是由系統轉化使用者的動作或系統訊息而得來的。使用者的動作例子包括:按下滑鼠鍵、確定送出表單...等。
在一個網頁內,事件通常是指由瀏覽器所偵測到使用者的特定動作,瀏覽器可以根據所偵測到的事件,來進行相關動作。舉例來說,使用者點選或移動滑鼠,或是瀏覽器的載入網頁,都可以看成是事件的產生。對於特定的事件,我們可以在瀏覽器內偵測得之,並以特定的程式來對此事件做出反應,此程式即稱為「事件處理器」(Event
handlers),又稱為 Callback。
事件處理的好處就是不用在主程式內檢查某事件有否發生,我們只須把要做的工作連繫到事件,當某事件真的發生了,系統就自動把這個訊息送到程式,那就會自動執行要做的工作了。
JavaScript 的事件處理者通常是連繫著物件的,因此不同的物件就支援不同的事件處理者。以下是 JavaScript 常用的事件處理器:
|
事件處理器 |
事件發生於 |
onBlur |
使用者離開某一欄,失去焦點時 |
onChange |
使用者改變某一欄的內容,改變物件選項或字串時 |
onClick |
使用者按下某個按鈕,點選某一個物件時 |
onFocus |
使用者的輸入焦點進入某一欄,得到焦點時 |
onLoad |
某一頁完全載入,瀏覽器載入網頁時 |
onMouseOver |
滑鼠游標在某個物件之上 |
onMouseOut |
滑鼠游標離開某個物件 |
onMouseup |
鬆開滑鼠按鈕時 |
onMouseDown |
按下滑鼠按鈕時 |
onSelect |
使用者選擇某一欄的內容 |
onSubmit |
使用者確定送出某表單 |
onUnload |
正在顯示的一頁被改變,瀏覽器離開網頁時 |
|
把函數指定到事件:
我們通常把那些在某事件發生後要做的工作寫成一個函數,不過如果你的工作很簡單,可以不用寫在函數內。
語法:把事件處理者寫成一個物件的 HTML 標記屬性,而屬性內容就是要執行的 JavaScript 敘述
|
<HtmlTag event_handler="statements">
|
|
程式範例(使用事件處理器執行函數): 看程式samp16.html執行結果
|
<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): 看程式samp17.html執行結果
|
<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): 看程式samp18.html執行結果
|
<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
| 滑鼠中鍵被按下
|
|
|