JavaScript

   


事件 (Event)


事件

事件是由系統轉化使用者的動作或系統訊息而得來的。 使用者的動作例子包括: 按下滑鼠鍵、確定送出表單等。 而系統的動作包括: 當一頁完全載入, 或瀏覽器要離開某頁等。 系統會將每個動作轉成一個事件, 然後送到程式, 我們便可以跟據不同的事件來設計不同的工作。 這種工作模式就叫做事件處理 (Event Handling), 而負責處理事件的名稱就叫做事件處理者 (Event Handler)。

事件處理的好處就是不用在主程式內檢查某事件有否發生, 我們只須把要做的工作連繫到事件, 當某事件真的發生了, 系統就自動把這個訊息送到程式, 那就會自動執行要做的工作了。

JavaScript 的事件處理者通常是連繫著物件的, 因此不同的物件就支援不同的事件處理者。 以下是 JavaScript 常用的事件處理者:

事件處理者 事件發生於
onBlur 使用者離開某一欄
onChange 使用者改變某一欄的內容
onClick 使用者按下某個按鈕
onFocus 使用者的輸入焦點進入某一欄
onLoad 某一頁完全載入
onMouseOver 滑鼠游標在某個物件之上
onMouseOut 滑鼠游標離開某個物件
onSelect 使用者選擇某一欄的內容
onSubmit 使用者確定送出某表單
onUnload 正在顯示的一頁被改變

把函數指定到事件

我們通常把那些在某事件發生後要做的工作寫成一個函數, 不過如果你的工作很簡單, 可以不用寫在函數內。

語法:把事件處理者寫成一個物件的 HTML 標記屬性, 而屬性內容就是要執行的 JavaScript 敘述

<tag 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)"

    首先為大家介紹一個關鍵字 thisthis 其實是一個物件, 它是指當時正在使用中的物件。 例子中的 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;

或者

return true;

一般情況下都會用 return false; 來終止程序, 但在處理連結物件或送出表單時, true 和 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>

例子說明:

  • onMouseOveronMouseOut

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

  • window.status

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

  • return true

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

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

至於如何終止一個事件, 就要在中階教學的表單物件部份詳述。







[到頁頂] [首頁] [速查表]