羅 朝淇的部落格

事件

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

  首先為大家介紹一個關鍵字 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;

或者

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>

例子說明：

• onMouseOver 和 onMouseOut

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

• window.status

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

• return true

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

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