小誌

　暱稱: 小誌
　頭銜: 曾經也是水電工

帖子: 1190
主題: 394
精華: 113
積分: 1747
點名: 1
作業系統: Vista
軟體版本: Office 2003
閱讀權限: 200
性別: 男
來自: 台灣
註冊時間: 2010-5-1
最後登錄: 2024-11-23

2021牛年全勤獎章好學求知勳章熱烈參與勳章 2017 雞年全勤獎章 2018 狗年全勤獎章 2019 豬年全勤獎章 2020鼠年全勤獎章

1^# 跳轉到 » 正序看帖

打印

字體大小: tT

發表於 2010-5-12 13:38 | 只看該作者

[教學] (教學第11篇)事件處理器上篇

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

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

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

事件名稱	發生時間
OnMouseOver	當滑鼠移至網頁元件(例如：超鏈結)上
OnMouseOut	當滑鼠離開鏈結(例如：超鏈結)上
OnClick	再網頁物件(例如：按鈕)上敲擊滑鼠按鍵時
OnLoad	當網頁載入時
OnUnLoad	當離開網頁時

事件處理器的撰寫格式如下：

name_of_handler="JavaScript code here"

複製代碼

事件名稱 = “程式碼”

複製代碼

請你注意在事件名稱之後接的是一個等號，這個等號表示：當事件發生時，就執行…，而相關的JavaScript程式敘述則必須放在等號之後的那組『’’’’』雙引號之中，這樣事件處理器才知道該執行的程式敘述是什麼；例如：

OnMouseMove=”alert(‘你碰到我了’)”

複製代碼

OnMouseOver事件
引發OnMouseOve事件的時機就是當我們把滑鼠指標移至網頁中的某一個物件時！例如：將滑鼠指標移至文字超鏈結上：

OnMouseoOver"JavaScript程式敘述或呼叫函式";

複製代碼

實作學習

<HTML>
<HEAD><TITLE>OnMouseOver事件</TITLE></HEAD>
<BODY>
<a href="" onMouseOver="alert('你碰到我了');">靠近我</a>
</BODY>
</HTML>

複製代碼

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

]實作學習
有時候，我們會在網頁中建立很多的超鏈結，超鏈結可能只是由一小段文字所組成，瀏覽者可能不知道按下這個超連結將會連結到何處去或是做什麼用的，因此，我們就可以在瀏覽者按下超鏈結之前使用OnMouseOver事件先在瀏覽器的狀態列上加上一段說明：

<HTML>
<HEAD><TITLE>鏈結說明</TITLE></HEAD>
<BODY>
<a href="" onMouseOver="status='按下此超鏈結會前往小誌的網站';return true">麻辣學園</a>
</BODY>
</HTML>

複製代碼

程式碼中的第四行：『status=’按下此超鏈結會前往小誌的網站’』，『status』是windows物件的一個屬性，代表瀏覽視窗的狀態列，而等號之後的單引號內文字則為要出現在狀態列的說明訊息。
在OnMouseOver事件內的程式碼：『status='按下此超鏈結會前往小誌的網站'』與『return true』是兩段獨立的程式敘述，其中間以『；』分號隔開，『return true』這段程式敘述一定要寫，不然在狀態列上是不會出現任何訊息的！

提示！！
因為『status』是windows物件的一個屬性，因此在程式撰寫時，亦可將『status』改寫為『window.status』。

樓主熱帖

心安，平安
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

小誌

　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員 Rank: 9 Rank: 9 Rank: 9

帖子: 1190
主題: 394
精華: 113
積分: 1747
點名: 1
作業系統: Vista
軟體版本: Office 2003
閱讀權限: 200
性別: 男
來自: 台灣
註冊時間: 2010-5-1
最後登錄: 2024-11-23

2021牛年全勤獎章好學求知勳章熱烈參與勳章 2017 雞年全勤獎章 2018 狗年全勤獎章 2019 豬年全勤獎章 2020鼠年全勤獎章

3^#

發表於 2010-5-12 13:50 | 只看該作者

OnClick 事件
當我們把滑鼠指標從某一個網頁物件移開時，將會引發OnClick事件！之前我們說過，事件控制是放於HTML標籤中，但這並不是說所有的HTML標籤內都可以放置事件控制器。像OnClick事件就只能發生於當瀏覽者按下表單按鈕、點選表單元件，或是按下超鏈結時。

OnClick"JavaScript程式敘述或呼叫函式";

複製代碼

實作學習
撰寫一JavaScript程式，在網頁中佈置三個按鈕讓瀏覽者點選，並將使用者的選擇結果以訊息視窗告知：

<HTML>
<HEAD><TITLE>OnClick事件</TITLE></HEAD>
<BODY>
<script language="JavaScript">
function mycolor(newcolor)
{
alert("你喜歡的顏色是"+newcolor);
}
</script>
你喜歡的顏色是：
<form>
<input type="button" value="黑色" onclick="mycolor('黑色')">
<input type="button" value="紅色" onclick="mycolor('紅色')">
<input type="button" value="藍色" onclick="mycolor('藍色')">
</form>
</BODY>
</HTML>

複製代碼

本範例不再將事件處理器所要執行的JavaScript程式敘述直接撰寫在HTML標籤內，而改採呼叫函式的方式，事件處理器所要執行的JavaScript程式敘述只是呼叫一個我們已經預先撰寫好的函式(程式碼第4行至第9行)！

心安，平安
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

小誌

　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員 Rank: 9 Rank: 9 Rank: 9

帖子: 1190
主題: 394
精華: 113
積分: 1747
點名: 1
作業系統: Vista
軟體版本: Office 2003
閱讀權限: 200
性別: 男
來自: 台灣
註冊時間: 2010-5-1
最後登錄: 2024-11-23

2021牛年全勤獎章好學求知勳章熱烈參與勳章 2017 雞年全勤獎章 2018 狗年全勤獎章 2019 豬年全勤獎章 2020鼠年全勤獎章

2^#

發表於 2010-5-12 13:46 | 只看該作者

OnMouseOut事件
當我們把滑鼠指標從某一個網頁物件移開時，將會引發OnMouseOut事件！

OnMouseOut"JavaScript程式敘述或呼叫函式";

複製代碼

OnMouseOut事件常與OnMouseOver事件一起使用，例如在上一小節的實作學習中，當我們將滑鼠指標移至超鏈結上時，在狀態列上會出現說明訊息，但是當我們滑鼠指標移出超鏈結時，狀態列上的說明訊息卻不會消失！

所以，我們可以再加上OnMouseOut事件，讓滑鼠指標移出超鏈結時，狀態列上的說明訊息消失！

<HTML>
<HEAD><TITLE>鏈結說明</TITLE></HEAD>
<BODY>
<a href="http://www.twbts.com" onMouseOver="status='按下此超鏈結會前往小誌的網站';return true" OnMouseOut="status=''">麻辣學園</a>
</BODY>
</HTML>

複製代碼

心安，平安
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP