Board logo

標題: [教學] (教學第11篇)事件處理器 上篇 [打印本頁]
作者: 小誌    時間: 2010-5-12 13:38     標題: (教學第11篇)事件處理器 上篇

什麼叫做事件（Event）？舉例來說：衣服髒了、車子髒了，我們就會「洗」衣服、「洗」車子，我們對車子、衣服都做了「洗」這個動作，這個「洗」的動作就是一個事件！所以我們「聽」、「看」、「說」、「聞」…..等等，這些動作都是一個「事件」。簡言之：凡是加諸於「物件」上的「動作」都是「事件」。在電腦的世界中，您按了一下滑鼠的按鍵，這樣就產生了一個滑鼠敲擊(Click)的事件。

  JavaScript中的事件處理器event handlers（或稱事件控制器）是非常有用而且功能強大的，事件處理器可以應用於許多的網頁元件之上，例如：超鏈結、圖片…等，請特別注意：在JavaScript中，事件控制並不放在<script>標籤中，而是使用於<html>標籤中的。當某些動作產生時，如：按下按鈕、移動滑鼠.......等，我們可以憑藉事件控制器來執行特定的JavaScript程式。

我們將介紹使用下列事件控制器：

事件名稱

發生時間

OnMouseOver

當滑鼠移至網頁元件(例如：超鏈結)上

OnMouseOut

當滑鼠離開鏈結(例如：超鏈結)上

OnClick

再網頁物件(例如：按鈕)上敲擊滑鼠按鍵時

OnLoad

當網頁載入時

OnUnLoad

當離開網頁時



事件處理器的撰寫格式如下：
  1. name_of_handler="JavaScript code here"
複製代碼
  1. 事件名稱 = “程式碼”
複製代碼
請你注意在事件名稱之後接的是一個等號，這個等號表示：當事件發生時，就執行…，而相關的JavaScript程式敘述則必須放在等號之後的那組『’’’’』雙引號之中，這樣事件處理器才知道該執行的程式敘述是什麼；例如：
  1. OnMouseMove=”alert(‘你碰到我了’)”
複製代碼
OnMouseOver事件
引發OnMouseOve事件的時機就是當我們把滑鼠指標移至網頁中的某一個物件時！例如：將滑鼠指標移至文字超鏈結上：
  1. OnMouseoOver"JavaScript程式敘述或呼叫函式";
複製代碼


實作學習
  1. <HTML>
  2. <HEAD><TITLE>OnMouseOver事件</TITLE></HEAD>
  3. <BODY>
  4. <a href="" onMouseOver="alert('你碰到我了');">靠近我</a>
  5. </BODY>
  6. </HTML>
複製代碼
[attach]275[/attach]

注意！！
在使用物件處理器，在雙引號內的程式碼若必須再使用到雙引號時，請改用「’」單引號！因為JavaScript的解譯器會認為程式碼終止於第二個出現的雙引號而產生程式執行錯誤。
[attach]276[/attach]

]實作學習
有時候，我們會在網頁中建立很多的超鏈結，超鏈結可能只是由一小段文字所組成，瀏覽者可能不知道按下這個超連結將會連結到何處去或是做什麼用的，因此，我們就可以在瀏覽者按下超鏈結之前使用OnMouseOver事件先在瀏覽器的狀態列上加上一段說明：
[attach]277[/attach]
  1. <HTML>
  2. <HEAD><TITLE>鏈結說明</TITLE></HEAD>
  3. <BODY>
  4. <a href="" onMouseOver="status='按下此超鏈結會前往小誌的網站';return true">麻辣學園</a>
  5. </BODY>
  6. </HTML>
複製代碼


提示！！
因為『status』是windows物件的一個屬性，因此在程式撰寫時，亦可將『status』改寫為『window.status』。
作者: 小誌    時間: 2010-5-12 13:46

OnMouseOut事件
當我們把滑鼠指標從某一個網頁物件移開時，將會引發OnMouseOut事件！
  1. OnMouseOut"JavaScript程式敘述或呼叫函式";
複製代碼
OnMouseOut事件常與OnMouseOver事件一起使用，例如在上一小節的實作學習中，當我們將滑鼠指標移至超鏈結上時，在狀態列上會出現說明訊息，但是當我們滑鼠指標移出超鏈結時，狀態列上的說明訊息卻不會消失！

[attach]278[/attach]

所以，我們可以再加上OnMouseOut事件，讓滑鼠指標移出超鏈結時，狀態列上的說明訊息消失！
  1. <HTML>
  2. <HEAD><TITLE>鏈結說明</TITLE></HEAD>
  3. <BODY>
  4. <a href="http://www.twbts.com" onMouseOver="status='按下此超鏈結會前往小誌的網站';return true" OnMouseOut="status=''">麻辣學園</a>
  5. </BODY>
  6. </HTML>
複製代碼
作者: 小誌    時間: 2010-5-12 13:50

OnClick 事件
當我們把滑鼠指標從某一個網頁物件移開時，將會引發OnClick事件！之前我們說過，事件控制是放於HTML標籤中，但這並不是說所有的HTML標籤內都可以放置事件控制器。像OnClick事件就只能發生於當瀏覽者按下表單按鈕、點選表單元件，或是按下超鏈結時。
  1. OnClick"JavaScript程式敘述或呼叫函式";
複製代碼
實作學習
撰寫一JavaScript程式，在網頁中佈置三個按鈕讓瀏覽者點選，並將使用者的選擇結果以訊息視窗告知：
[attach]279[/attach]
  1. <HTML>
  2. <HEAD><TITLE>OnClick事件</TITLE></HEAD>
  3. <BODY>
  4. <script language="JavaScript">
  5. function mycolor(newcolor)
  6. {
  7. alert("你喜歡的顏色是"+newcolor);
  8. }
  9. </script>
  10. 你喜歡的顏色是：
  11. <form>
  12. <input type="button" value="黑色" onclick="mycolor('黑色')">
  13. <input type="button" value="紅色" onclick="mycolor('紅色')">
  14. <input type="button" value="藍色" onclick="mycolor('藍色')">
  15. </form>
  16. </BODY>
  17. </HTML>
複製代碼
本範例不再將事件處理器所要執行的JavaScript程式敘述直接撰寫在HTML標籤內，而改採呼叫函式的方式，事件處理器所要執行的JavaScript程式敘述只是呼叫一個我們已經預先撰寫好的函式(程式碼第4行至第9行)！



歡迎光臨 麻辣家族討論版版 (http://forum.twbts.com/)