JavaScript 事件处理

　

第 11 章　Event handlers

　作者: 伍新華 Email: [e-mail]

11.2　focus( ) 及 select( )

1.　focus( ) method

2.　onBlur 及 onFocus

　

---

　用 event 來啟動 JavaScript

　　在網頁中, 我們可以順序放下 JavaScript 的 assignments、methods 及 functions 等指示, 瀏覽器載入網頁時, 會順序執行這些指示。

　　我們也可以在網頁中放置不即時執行的指示, 而使用一些名為 event handlers (事件處理器) 的方法, 當觀看者進行一些 events, 就會啟動一些 event handlers, 從而引致我們設定的一些反應。

1.　觀看者進行的一個動作, 就是一個 event, 例如 Click (按一個按鈕), Change (改變文字框的文字), MouseOver (滑鼠指標在連結上)。

　　負責處理這些動作的就是 event handler, 使用的名稱是在 event 前加上 on 這個字, 例如 onClick、onChange、onMouseOver 等等。

　　這些 event handler 正式是全部用小寫, 例如 onclick、onchange、onmouseover, 若在 HTML 中使用, 例如在

或 內, 可不理會大小寫, 但若在

3.　另請留意在 event handler 內, 有些地方是不能省略上層的物件, 例如 onClick="window.close( )" 就不能簡為 onClick="close( )" , 我們很多時不知道各版本的瀏覽器對簡略寫法的容忍程度, 所以應盡量使用標準寫法。

4.　在 event handlers 使用的文字名稱要放在 " " 或 ' ' 內, 否則瀏覽器會將這名稱作為變數來處理, 請看 練習-78 處的說明。

5.　在一些 event handler 中, 引發一個 function (或 method) 時, 若這 function 傳回 true 值, 這 event handler 會如常操作, 若傳回 false 值, 這 event handler 會取消, 請看隨後onClick 的一段的說明。

6.　在 附錄-7 中, 你可看到在 JavaScript 中可使用的 event handler 及每個 handler 可在哪一個物件使用。

　

　

---

　focus( ) 及 select( )

　　在未說個別的 event handler 前, 請你首先看兩個與 event handler 有關的 method: focus( ) 及 select( )。

　

　focus( ) method

　　Focus 是指將一個物件變為工作目標的事件或動作, 例如用滑鼠指標在一個文字框中按一下, 這文字框就會出現一個文字插入點 (insertion point), 這時網頁的 focus 就是在這文字框上, 按鍵盤輸入文字, 文字就會在文字框出現。Focus 最常用於 form 的物件, 或用於各窗格。

　　觀看者看網頁時, 可以用滑鼠指標選定一個物件為 focus, 例如選定一個文字框為輸入目標, 我們也可在 JavaScript 中利用 focus( ) 這一個 method 來將 focus 放在某個物件上, 請看以下例子:

fm >
tx >

　　網頁中這一句: document.fm.tx.focus( ), 是將 focus 放在 fm.tx 這物件上, 你造出以上網頁, 用瀏覽器開啟後, 就會見到文字插入點已在文字框內出現, 這時按鍵盤, 文字就會走進文字框。

　　你可試刪去 document.fm.tx.focus( ) 這句, 看有什麼不同。

　

　select( ) method

　　Select 是指選定一個文字框內的文字, 這文字會蓋著亮光 (highlight), 觀看者按鍵盤一個鍵, 就會刪去亮光的部份及輸入該鍵, 請看以下例子:

fm >
tx value="Your name here.">

　　請你造出以上網頁, 用瀏覽器開啟後, 就會見到以下顯示:

　　文字框內的文字已被選定, 請你在鍵盤按一個鍵, 輸入的一個字會取代被選定的文字。

　　在 Netscape, 你要先用 document.fm.tx.focus( ) 這一句將 focus 放進文字框, 然後再用 document.fm.tx.select( ) 選定文字框內的文字, 在IE不需要 document.fm.tx.focus( ) 這一句。

　

　

---

　個別 event handler 說明

　　在 event handler 的反應, IE 與 Netscape 有很大分別, 所以你要在這兩個瀏覽器中試驗清楚你的 script, 例如 onClick 及 onMouseOver, 在 IE 可用於 image, 在 Netscape 則不可以。

　

　onAbort

　　onAbort (中斷) 是用於 image 這物件, 當瀏覽器載入一幅圖片時, 若觀看者按 [停止] 按鈕, 或轉去另一個網頁, 因此中止載入該圖片, 就會引發 onAbort 所設定的反應, 例如:

　　終止載入 welcome.gif 圖片就會引發上述設定的 alert 對話盒。

　

　onBlur 及 onFocus

　　onFocus 及 onBlur 是兩個相對的 event handlers, onFocus 是指文字插入點 (insertion point) 或滑鼠指標進入一個 form 內的物件 (例如 button, checkbox 等等) 或進入 window及 frame 的範圍。

練習-76　onFocus 的使用

　　這練習有三個文字框, 你可用來試驗 onFocus 的反應。

1.　請用瀏覽器開啟示範磁碟中的 onfocus.htm, 這檔案有以下內容:

fm> 操作提示: tx size=30>

這處請輸入你的姓名: 20
　　onFocus="document.fm.tx.value='請輸入你的全名' ">

這處請輸入你的出生日期: 20
　　onFocus="document.fm.tx.value='請用數字及這格式: 年/月/日' ">

2.　網頁中有以下三個文字框:

3.　請你用滑鼠在第一個文字框內按一下, 應不見反應, 因為這文字框沒有 onFocus 的設定。

4.　請你用滑鼠在第二個文字框內按一下, 這是將 focus 放在這文字框, 因此會引發 onFocus 的反應, 在這例子, 第二個文字框有這設定:

onFocus="document.fm.tx.value='請輸入你的全名' "

　　document.fm.tx 是第一個文字框, 所以第一個文字框會出現「請輸入你的全名」這句。

4.　請你用滑鼠在第三個文字框內按一下, 留意第一個文字框出現什麼文字。

　

　　若你使用 onFocus 叫出 alert 對話盒, 例如 onFocus="alert('Please fill in your name.')" , 在 Netscape-4 可能不能操作, 在 Netscape-3 及 IE 則正常。

　　onBlur 是當文字插入點或滑鼠指標移離一個 form 內的物件 (例如 button, checkbox 等等), 或移離 window 及 frame 的範圍, 我們很多時會使用 onBlur 來啟動文字框的檢查機制, 請看以下例子。

　

練習-77　onBlur 的使用

　　這練習有一個文字框, 是讓觀看者輸入出生日期, 然後使用 onBlur 的方法來檢查是否有輸入資料。

1.　請用瀏覽器開啟示範磁碟中的 , 這檔案有以下內容:

fm> 請輸入你的出生日期:

tx size=20 onBlur="checkIt( ) ">

2.　網頁中有一個文字框, 請你用滑鼠指標按一下文字框的範圍, 這會在文字框內放下文字插入點, 請你不要輸入任何字符 (包括空格), 用滑鼠在文字框範圍之外按一下, 這就是這文字框的 onBlur, 會有一個對話盒出現顯示: "你沒有填入資料!!", 這就是 onBlur 啟動 checkIt( ) 後, 這 function 檢查不到有字符輸入作出的反應。

3.　請你在文字框中輸入資料, 看對話盒出現什麼文字。

　

　　這處的練習只用來示範 onBlur 的操作, 有關檢查文字框是否有資料或輸入的是否數字, 請看 form 及 String object 的兩章。

　　這一章的 event handler 例子, 很多是與 標籤一起使用, 以下的例子是與 標籤一起使用。

　

練習-78　在 內的 onFocus 及 onBlur

　　這練習在 標籤內用 onFocus 及 onBlur 來轉換網頁的背景顏色, 另有兩個文字框、一個按鈕及一幅圖片, 你試在這些物件中進行 focus 及 blur 的動作, 看背景顏色有什麼反應。

1.　請用瀏覽器開啟示範磁碟中的 , 這檔案有以下內容:

 
　　onFocus="document.bgColor='lightblue' ">

20 >

12>

D E M O N S T R A T I O N

cat.jpg>

2.　載入網頁時, 背景顏色是紅色, 請你在文字框或按鈕中按一下, 這是將滑鼠指標移離網頁主體 ( ) 範圍, 對這範圍來說, 這就是 onBlur, 所以會引致document.bgColor='yellow' 的反應, 背景顏色變為黃色。

　　(留意: 上個練習的 onFocus 及 onBlur 是屬於

的, 今次的 onFocus 及 onBlur 是屬於 的。)

3.　請再在網頁主體範圍中按一下, 這就是 onFocus, 所以會引致 document.bgColor='lightblue' 的反應, 背景顏色變為淺藍色。

4.　請在圖片上按一下, 這不引致任何轉變, 因為圖片是屬於網頁主體的範圍。

5.　在今次設定, 留意 bgColor=red 是屬於 HTML 語言, red 可以不放在 " " 內。而onBlur="document.bgColor='yellow' " 是屬於 JavaScript 語言, yellow 要放在 ' ' 內, 表示這是文字 (string), 否則瀏覽器會將 yellow 這字看作是變數名稱, 而這名稱還未定義, 所以會有錯誤指示告訴你 yellow 這字是 undefined。

　　若你不明上段說的是什麼, 請看以下寫法:

<html>

　　onFocus="document.bgColor=lb">
　　　　:　　　 :
　　　　:　　　 :

　　這寫法中的 yw 及 lb 是變數名稱, 所以不需放在 ' ' 內, 但定義這兩個變數時, yellow 及 lightblue 還是要放在 " " 內。

　　onFocus 及 onBlur 除了可在 標籤內使用, 也可用於窗格 (frame) , 請看以下例子。

　

練習-79　在不同窗格使用 onFocus 及 onBlur

　　這練習的瀏覽器有三個窗格, 在每個窗格的網頁, 標籤內都用 onFocus 及onBlur 來轉換網頁的背景顏色, 你可看到選每一個窗格, 這窗格的網頁就會變為黃色。

1.　請用瀏覽器開啟示範磁碟中的 , 這網頁有以下內容:

70%,30%>
　　　　30%,70%>
　　　　　　demo.htm name=leftFrame >
　　　　　　demo.htm name=rightFrame >
　　　　
　　demo.htm name=lowerFrame >

　　這用來在瀏覽器開啟三個窗格, 每個窗格都載入demo.htm。

2.　demo.htm 這檔案有以下內容:

　　onBlur="document.bgColor='lightblue' ">
5> This is demo.htm.
20 >

3.　網頁中有三個窗格, 每個窗格內有一個文字框, 請你分別在各元件中按一下, 看背景顏色的轉變。

　

　onChange

　　使用 onChange, 當滑鼠指標移離一個 Select、Text、或 Textarea 的元件, 若元件的內容曾改變, 就會引發 onChange 所設定的反應。

　

練習-80　使用 onChange

　　這練習的網頁內的文字框有一個 onChange 的設定, 你試在文字框內輸入文字, 看有什麼反應, 再改變這文字, 看又有什麼反應。

1.　請用瀏覽器開啟示範磁碟中的 , 這網頁有以下內容:

20
　　onChange="alert( '請再檢查資料是否正確') " >

2.　網頁中有一個文字框, 請你在文字框輸入一些資料, 然後用滑鼠在文字框外按一下, 你應見到一個 alert 對話盒出現, 這就是改變文字框的內容 (即是 onChange) 引致的反應。

3.　請再用滑鼠按一下文字框, 這會將指標放進文字框, 不要輸入資料, 然後用滑鼠在文字框外按一下, 留意這不會有任何反應, 從這處, 你可看到 onChange 及 onBlur 不同之處。

　

　onClick

　　Click 是用滑鼠按一下一個物件的動作, 這會引發用 onClick 所設定的反應, 可用於 button、document、checkbox、link、radio、reset、submit。

　　Click 實際是由 MouseDown (按下滑鼠鍵) 及 MouseUp (放開滑鼠鍵) 兩個動作組成, 請同時參看這兩段。

　　若要在網頁中使用 onClick, 可在 內設定, 例如:

　　網頁開啟後, 在網頁任何地方用滑鼠按一下, 都會引致 alert 對話盒的出現, 這方面的用途不大。

　　onClick 多數是與 button 一起使用, 本書前面已有很多例子, 在這一段, 筆者主要是說 onClick 一些特別操作方式。

　

onClick 接受傳回的 true/false 值:

　　在 checkbox、link、radio、reset、及 submit 中使用 onClick, 若有一個 false 值傳回給 onClick, 這 onClick 所引致的反應就會中止, 請首先看這例子:

　

練習-81　將 false 值傳回給 onClick

　　這練習的網頁內有一個連結, 用滑鼠按一下就會有 confirm 對話盒要你確定, 你看看如何使用 return false 來取消一個 onClick 操作。

1.　請用瀏覽器開啟示範磁碟中的 , 這網頁有以下內容:

demo2.htm

2.　這網頁有 demo2.htm 這連結, 請用滑鼠按一下, 有對話盒問你是否真的要離開, 請你按 [確定], 這會載入 demo2.htm。

3.　請你按工具列中的 [上一頁/Back] 回到 onclick1.htm, 用滑鼠按一下 domo2.htm 這連結, 有對話盒問你是否真的要離開, 今次請你按 [取消], 這會引發 confirm 對話盒中 false的反應 (請參看 3.2-2 的一段), 這反應完畢 (今次例子沒有設定反應, 所以實際沒有反應), onClick 會繼續載入 demo2.htm 這網頁。

4.　在今次例子, 在對話盒中無論按 [確定] 或 [取消], 都會轉去 demo2.htm 這網頁, 即是onClick 不會受這兩個按鈕影響。

5.　若要取消 onClick 的反應, 我們可以將 confirm 對話盒這 false 值傳回給 onClick, onClick 遇到這 false 值, 就不會繼續工作, 若傳回的是 true 值, onClick 的工作就會繼續。

6.　請用瀏覽器開啟示範磁碟中的 , 這網頁有以下內容:

demo2.htm

7.　網頁開啟後, 請你按 demo2.htm 這連結, 在出現的 confirm 對話盒中, 請你按 [取消], 今次就不會轉去 demo2.htm 這網頁。

8.　這處的 return confirm 是要讀取 confirm 對話盒傳回 true 或 false 值, 如下:

demo2.htm

　　觀看者按 [確定] 就是傳回一個 true 值, 有以下結果, onClick 繼續操作:

demo2.htm

　　若觀看者按 [取消] 就是傳回 false 值, 有以下結果, onClick 的反應取消:

demo2.htm

　

　onDblClick

　　這是連按兩下滑鼠鍵所引發的反應, 用於 document、form 及 link, 這 event handler 在 Netscape-4 及以上的版本才生效。onDblClick 與 onClick 的使用方式及語法相似, 請看以下例子:

　

練習-82　onBblClick 的使用

1.　請用瀏覽器開啟示範磁碟中的 , 這網頁有以下內容:

 
　　onDblClick="window.location='demo2.htm' ">

2.　請用滑鼠連按兩下網頁中的按鈕, 這就是這按鈕的 BblClick, 這會引致 onDblClick 所設定的反應: window.location='demo2.htm' , 所以會載入 demo2.htm 這檔案。

　

　onKeyDown

　　這是在鍵盤按下一個鍵所引發的反應, 用於 form、image、link 及 textarea。

練習-83　onKeyDown 的反應

1.　請你用瀏覽器開啟示範磁碟中的 , 這檔案有以下內容:

fm>
tx onKeyDown="alert('You have pressed a key.') " >

2.　開啟這網頁後, 你會見到一個文字框, 請你用滑鼠在文字框中按一下放進文字插入點, 在鍵盤上按一個鍵 (這就是 KeyDown), 例如按下 a 字鍵, 你會見到一個 alert 對話盒, 這就是 onKeyDown 引發的反應, 你按對話盒中的 [確定], 文字框就會出現 a 字。

　

　onKeyPress 及 onKeyUp

　　上一段的 keyDown 是按一個鍵, 這實際是由 KeyPress (按下一個鍵) 及 KeyUp (放開該鍵) 兩個動作組成, 若我們要將這兩個 event 作個別處理, 可使用onKeyPress 及 onKeyUp, 這兩項功能可用於 image、link 及 form, 在 IE, 也可用於 標籤內。

　　請用瀏覽器開啟示範磁碟中的 , 這檔案有以下內容:

　　onKeyPress="document.bgColor='red' "
　　onKeyUp="document.bgColor='lightyellow' ">

　　你會見到網頁中有一個文字框, 請將滑鼠指標放進文字框, 然後按一個鍵, 你會見到按下的一剎那間 (onKeyPress), 網頁的背景顏色變為紅色, 放開這鍵 (onKeyUp) 後變為淺黃色。

　

　onLoad

　　Load 是載入網頁或圖像的 event, 利用 onLoad 就可設定這 event 所引發的反應, 這常用於載入網頁時開啟另一個子視窗來向觀看者顯示一個廣告, 有些更會在子視窗的網頁中又使用 onLoad 來引發另一個子視窗, 目的是向觀看者強銷他們的廣告。

練習-84　用 onLoad 開啟子視窗

　　在這練習, 你會看到一個網頁, 當這網頁開啟時, 會開啟一個新視窗來向觀看者顯示一個訊息。

1.　請用瀏覽器開啟示範磁碟中的 , 這檔案有以下內容:

　　"adwin=window.open('promo1.htm','win2 ','width=500,height=300')
adwin.moveTo(80,80)
setTimeout('adwin.close( )', 5000) " >

This is onload.htm.

2.　這處的 onLoad 是使到網頁開啟後執行隨後的設定, 網頁開啟後, 你會見到一個新視窗出現, 這視窗移到中間位置, 然後在 5 秒後自動收起。

　

　　假若 onLoad 有很多事項要設定, 我們一般會用 function 的方式, 例如以上的網頁可作以下修改:

showAdWin( ) >

This is onload.htm.

　　onLoad 也可在載入圖像中使用, 請看以下例子:

welcome.gif onLoad="alert('請細看這圖片') ">

　　圖片載入前 (在 IE) 或之後 (在 Netscape), 會有一個 alert 對話盒出現, 觀看者按 [確定] 才可繼續。

　

　onMouseDown 及 onMouseUp

　　MouseDown 是觀看者按下滑鼠鍵, MouseUp 是放開該鍵, 利用 onMouseDown及 onMouseUp 就可設定這兩個 event 引發的反應, 這可用於 button、document 及 link, 這功能在 Netscape-4 及以上的版本才有效, IE 的反應有些不同, 例如可在 及 中使用。請你試試以下網頁, 這是在示範磁碟內的。

　　onMouseDown="document.bgColor='orange' "
　　onMouseUp="document.bgColor='lightcyan' ">

　　網頁開啟後, 你會見到一個按鈕, 請你將滑鼠指標放在這按鈕上, 按下左鍵, 你會見到網頁的背景顏色變為橙色, 放開左鍵, 就變為淺藍色。

　

　onMouseOver 及 onMouseOut

　　MouseOver 是滑鼠指標到達一個 link 之上, MouseOut 是滑鼠指標移離一個link, 使用 onMouseOver 及 onMouseOut 就可設定這兩個 event 的反應。在 IE, 這兩個 event handler 可用於其他物件, 例如 image、text、button, 在 Netscape 只可用於 link。

練習-85　用 onMouseOver 轉換圖片 (1)

　　在這例子, 在一幅大圖片的位置 (document.pic.src), 起初是載入 blank.jpg, 當滑鼠指標到達 minicat.jpg 之上, 大圖位置的圖片就轉換為 cat.jpg, 到達 mparrot.jpg 之上, 就轉換為 parrot.jpg, 到達 minicow.jpg 之上, 就轉換為 cow.jpg, 請看以下示意圖。

　　在這例子, onMouseOver 與 image 合用, 在 IE 有效, 在 Netscape, onMouseOver 只能在 link ( ) 使用, 所以沒有反應。

1.　請用 IE 開啟示範磁碟中的 , 這檔案有以下內容:

blank.jpg name=pic border=1 width=200 height=200>

請選擇你要看的圖片:
minicat.jpg border=0 width=50 height=50 align=middle
　　onMouseOver="document.pic.src='cat.jpg' "
　　onMouseOut="document.pic.src='blank.jpg' " >

mparrot.jpg border=0 width=50 height=50 align=middle
　　onMouseOver="document.pic.src='parrot.jpg' "
　　onMouseOut="document.pic.src='blank.jpg' " >

minicow.jpg border=0 width=50 height=50 align=middle
　　onMouseOver="document.pic.src='cow.jpg' "
　　onMouseOut="document.pic.src='blank.jpg' " >

2.　請用 IE 看這網頁, 留意每個圖片的 onMouseOver 及 onMouseOut 的反應。

　

　　以上網頁, 在 Netscape 沒有反應, 因為 onMouseOver 及 onMouseOut 標準是與 link 一起使用, 若要在Netscape中也有反應, 可將有關的圖片連結去 javascript:void(0) 這一個 "無" 的位置, 這是無效的連結, 但不會出現錯誤訊息, 請看以下例子。

練習-86　用 onMouseOver 轉換圖片 (2)

1.　請用瀏覽器開啟示範磁碟中的 , 這檔案有以下內容:

blank.jpg name=pic border=1 width=200 height=200>

請選擇你要看的圖片:
　　onMouseOver="document.pic.src='cat.jpg' " >
minicat.jpg border=0 width=50 height=50 align=middle>

　　onMouseOver="document.pic.src='parrot.jpg' " >
mparrot.jpg border=0 width=50 height=50 align=middle>

　　onMouseOver="document.pic.src='cow.jpg' " >
minicow.jpg border=0 width=50 height=50 align=middle>

2.　請你分別用 IE 及 Netscape 看這網頁, 將滑鼠指標放在小圖上, 看大圖有什麼轉變。

3.　這例子與上個例子大致相同, 但滑鼠指標到達小圖上, 會變為手指指標, 表示小圖是 link source, 在這例子, 這些 link sources 是虛擬的, 所以按一下沒有反應。這例子沒有設定 onMouseOut, 滑鼠指標移離時, 不會有任何反應。

　

　　onMouseOver 除了用來轉換圖片, 還可作其他設定, 例如:

onMouseOver="document.bgColor='yellow' "
onMouseOver="alert('The pointer is now on top of the picture.' )"

　　請同時參看隨後 11.4 的一節, 這是另一個使用 onMouseOver (或其他 event handler) 的方法。

　

　onReset

　　Reset 是觀看者按下重置的按鈕, 這會將 form 內已輸入的資料清除, 回復預設值, 使用 onReset, 我們可以另行設定一些額外反應, 以下例子是顯示一個對話盒要觀看者確定是否要重置。

　

練習-87　onReset 的使用

1.　請用瀏覽器開啟示範磁碟中的 , 這網頁有以下內容:

fm onReset="return confirm('真的要重置資料?')" >

2.　在網頁中, 你應見到以下元件:

　　請你在文字框中輸入一些文字, 然後按 [重置] 的按鈕, 就會看到 confirm 對話盒出現, 按 [確定] , 就會重置資料, 按 [取消], 就是取消重置。

3.　有關 return confirm( ) 的使用, 請看前面 onClick 的一段。

　

　onResize

　　Resize 是觀看者改變瀏覽器視窗的大小, 使用 onResize 可設定這 event 的反應, 這功能在 Netscape-4 或以上的版本才有效。

練習-88　onResize 的使用

1.　請用瀏覽器開啟示範磁碟中的 , 這網頁有以下內容:

　　onResize="alert('你改變視窗大小, 可能影響顯示。' ) " >

This is onResize.htm

2.　網頁開啟後, 請你改變瀏覽器視窗的大小, 看有什麼反應。

　

　onSelect

　　Select 是指觀看者在 text 或 textarea 中選定了一些文字, 使用 onSelect 可設定這event的反應, 例如以下網頁:

5<strong> cols=</strong>30<strong> onSelect="alert('</strong>Check your selection<strong>') " ><br> </strong>This is the text within the textarea.<strong><br>

　　觀看者在文字框選定一些文字, 就會有 alert 對話盒出現。

　

　onSubmit

　　在 form 的設定, 通常會有一個 submit (送出資料) 的按鈕, 觀看者在 form 中輸入資料後, 按這按鈕 (這 event 就是 submit), 資料就會送出, 我們可以使用 onSubmit 來設定資料送出前的一些反應, 通常是將資料作初步驗証 (validation), 例如核對是否有些文字框未輸入資料, 電話號碼是否 8 個數字, 又或電郵地址是否有 @ 這符號。

　　以下例子有一個文字框, 你輸入文字, 按 [送出資料] 的按鈕, 資料送出前 (onSubmit) 會啟動 checkIt( ) 這個自訂 function, 這是查核文字框內是否有輸入文字, 若沒有就會有 alert 對話盒的提示, 同時送出資料的程序也終止。

練習-89　onSubmit 的使用

1.　請用瀏覽器開啟示範磁碟中的 , 這網頁有以下內容:

　action="mailto:[e-mail]" enctype="text/plain"
　onSubmit="return checkIt( )">

請填入你的姓名:
tx size=20 >

2.　網頁開啟後, 你應見到以下元件:

3.　請不要在文字框輸入資料就按 [送出資料] 的按鈕, 看有什麼反應。留意這處有 document.fm.tx.focus( ) 這一句, 所以資料不送出, 文字插入點會自動回到文字框內, 請看前面 focus( ) 的一段。

4.　若你在文字框輸入資料, 按 [送出資料] 的按鈕, 會有對話盒要你確定是否送出資料, 按 [確定], 資料就會以電子郵件的方式送出, 你在這網頁的 mailto: 的一項填出你的電郵地址, 資料就會寄去你的郵箱, 若不想送出資料可按 [取消]。

　

1.　在這例子, 請看: onSubmit="return checkIt( )" 這一句, 這是在按 submit 的按鈕時就啟動 checkIt( ) 這 function, return 的意思是要等候這 function 的傳回值, 若傳回true 就送出資料, 若傳回 false 就取消送出資料。

2.　checkIt( ) 要檢查的是 if(document.fm.tx.value==""), 這是看文字框是否沒有文字 (這 "" 兩個相連引號表示 "無"), 若這是 true 就會有對話盒通知觀看者, 並傳回false 值 (return false), submit 的操作取消。

　

　onUnload

　　當由一個網頁轉去另一個網頁, 載入新網頁就是 Load, 取消舊網頁就是 Unload, 我們使用 onUnload 可設定 Unload 的反應, 有些商業網頁在觀看者離開時, 用 onUnload 強迫觀看者再看多另一個廣告網頁, 筆者曾見過有些以循環的方式不讓觀看者離開, 除非關閉瀏覽器。

練習-90　onUnload 的使用

　　在以下例子, 你開啟一個名為 onunload.htm 的網頁, 你可試試轉去另一個網頁, 或重新載入這網頁, 或關閉瀏覽器, 看有什麼反應。

1.　請用瀏覽器開啟示範磁碟中的 , 這網頁有以下內容:

 
　　"msgWin=window.open('promo1.htm','win2','width=400,height=200')">

這是 onunload.htm

demo2.htm> 轉去 demo2.htm

2.　網頁開啟後, 請你先試試轉去 demo2.htm, 你應見到一個子視窗出現。

　　請你轉回去 onunload.htm, 在工具列中按 [重新整理/Reload] 按鈕, 這實際是結束 onunload.htm, 然後重新載入 onunload.htm, 你可看看有什麼反應。

3.　最後, 請你結束瀏覽器, 看是否會啟動 onUnload。(在 Netscape-4 一些版本, 這項操作可能有錯誤出現, IE 及 Netscape-3 沒有問題。

　

　

---

　自訂的 event

　　前面說的 event handler 都有預設相關的 object, 例如 onMouseOver 預設是與 link 一起使用, 你就不能將這功能用於 button 或文字框, 但透過自行定義的 event, 你可將一個 event handler 與其他物件使用。

　　在 練習-85, 你看到在 Netscape 中, onMouseOver 不能在 中使用, 但以下例子將兩幅小圖與 onmouseover 連結, 所以這小圖就會對 onmouseover作出反應。

練習-91　自訂 onmouseover

1.　請用瀏覽器開啟示範磁碟中的 , 這網頁有以下內容:

blank.jpg name=pic1 border=1 width=200 height=200>

請選擇你要看的圖片:
minicat.jpg name=pic2 border=0 align=middle>
minicow.jpg name=pic3 border=0 align=middle>

2.　請你將滑鼠指標放在兩幅小圖上 (pic2 及 pic3 ), 看大圖 (pic1) 的轉變。

　

1.　在自訂的 event handler 中, 請先看以下的兩句:

document.pic2.onmouseover=showcat
document.pic3.onmouseover=showcow

　　我們將 document.pic2 這物件與 onmouseover 連結, 並命名為 showcat , 這就是一個新的 event, 當有這 event 出現時, 就會叫用 showcat( ) 這個 function。

2.　我們要另行設定 showcat( ) 及 showcow( ) 的反應, 例如:

function showcat( )
{　document.pic1.src='cat.jpg'　}

　　當有 document.pic2.onmouseover 這 event 出現, 就會叫用 showcat( ) 這 function, 因此有 document.pic1.src='cat.jpg' 的反應。

3.　前面的 onMouseOver 是在 HTML 語言中使用, 不用分大小寫, 這處的 onmouseover 是在 JavaScript 的