JavaScript中的事件處理器event handlers（或稱事件控制器）是非常有用而且功能強大的，事件處理器可以應用於許多的網頁元件之上，例如：超鏈結、圖片…等，請特別注意：在JavaScript中，事件控制並不放在<script>標籤中，而是使用於<html>標籤中的。當某些動作產生時，如：按下按鈕、移動滑鼠.......等，我們可以憑藉事件控制器來執行特定的JavaScript程式。
我們將介紹使用下列事件控制器：
- OnMouseOver 當滑鼠移至網頁元件(例如：超鏈結)上
- OnMouseOut 當滑鼠離開鏈結(例如：超鏈結)上
- OnClick 再網頁物件(例如：按鈕)上敲擊滑鼠按鍵時
- OnLoad 當網頁載入時
- OnUnLoad 當離開網頁時
事件處理器的撰寫格式如下：
請你注意在事件名稱之後接的是一個等號，這個等號表示：當事件發生時，就執行…，而相關的JavaScript程式敘述則必須放在等號之後的那組『’’’’』雙引號之中，這樣事件處理器才知道該執行的程式敘述是什麼；例如：
OnMouseOver事件
引發OnMouseOve事件的時機就是當我們把滑鼠指標移至網頁中的某一個物件時！例如：將滑鼠指標移至文字超鏈結上：
實作學習
實作學習
有時候，我們會在網頁中建立很多的超鏈結，超鏈結可能只是由一小段文字所組成，瀏覽者可能不知道按下這個超連結將會連結到何處去或是做什麼用的，因此，我們就可以在瀏覽者按下超鏈結之前使用OnMouseOver事件先在瀏覽器的狀態列上加上一段說明：
- 程式碼中的第四行：『status=’按下此超鏈結會前往小誌的網站’』，『status』是windows物件的一個屬性，代表瀏覽視窗的狀態列，而等號之後的單引號內文字則為要出現在狀態列的說明訊息。
- 在OnMouseOver事件內的程式碼：『status='按下此超鏈結會前往小誌的網站'』與『return true』是兩段獨立的程式敘述，其中間以『；』分號隔開，『return true』這段程式敘述一定要寫，不然在狀態列上是不會出現任何訊息的！
OnMouseOut事件
當我們把滑鼠指標從某一個網頁物件移開時，將會引發OnMouseOut事件！
OnMouseOut事件常與OnMouseOver事件一起使用，例如在上一小節的實作學習中，當我們將滑鼠指標移至超鏈結上時，在狀態列上會出現說明訊息，但是當我們滑鼠指標移出超鏈結時，狀態列上的說明訊息卻不會消失！所以，我們可以再加上OnMouseOut事件，讓滑鼠指標移出超鏈結時，狀態列上的說明訊息消失！
OnClick 事件
當我們把滑鼠指標從某一個網頁物件移開時，將會引發OnClick事件！之前我們說過，事件控制是放於HTML標籤中，但這並不是說所有的HTML標籤內都可以放置事件控制器。像OnClick事件就只能發生於當瀏覽者按下表單按鈕、點選表單元件，或是按下超鏈結時。
實作學習
撰寫一JavaScript程式，在網頁中佈置三個按鈕讓瀏覽者點選，並將使用者的選擇結果以訊息視窗告知：
本範例不再將事件處理器所要執行的JavaScript程式敘述直接撰寫在HTML標籤內，而改採呼叫函式的方式，事件處理器所要執行的JavaScript程式敘述只是呼叫一個我們已經預先撰寫好的函式(程式碼第4行至第9行)！
沒有留言:
張貼留言