所謂「事件」，是指使用者對網頁中的某個元件進行某種操作時會發生，所謂的「事件處理函式」，則是在該事件發生後的那一瞬間所執行的函式。每種事件的事件處理函式，其名稱都是在事件名稱前加上on兩個字母。例如，load事件的事件處理函式名為onload，click事件的事件處理函式名為onclick…等等。要為一個元件設定某事件的事件處理函式，可以將事件處理函式寫在該元件的html標籤的屬性(屬性名稱就是事件處理函式的名稱，如onload、onclick等等)中，也可以寫在javascript程式碼區中。
※ 在html標籤中定義網頁事件、表單事件與控制項事件的事件處理函式
※ 前註：有一些事件，只限定在某些瀏覽器或瀏覽器版本才能夠使用，換了個瀏覽器、或版本，即不能用了。而以下所介紹的事件，在現行的所有瀏覽器及版本中都能運作正常。
1. 瀏覽器事件：表示使用者對瀏覽器進行操作。瀏覽器事件要寫在主體區標籤<body>之內。常用的瀏覽器事件及其相對應的事件處理函式介紹如下：
(1) load事件、onload事件處理函式：當使用者開啟網頁時，實際上所執行的動作，是向伺服端發出一個「要求」，要求瀏覽網頁，若此要求被允許，則伺服端會傳送網頁文件檔給用戶端，load事件即代表「用戶端瀏覽器下載完網頁文件檔」這一件事的發生。其事件處理函式的用法例如：
<body onload="alert('歡迎光臨!!');" ></body>
//執行後顯示：
(2) unload事件、onunload事件處理函式：unload事件代表「用戶端執行跳轉網頁或關閉網頁」此一操作的發生。其事件處理函式的用法例如（設伺服器資料夾內有一網頁檔案名test2.php）：
<body onunload="alert('謝謝光臨!!');" >
<a href="test2.php">點我跳轉網頁</a>
</body>
//執行後下超連結，然後顯示：
(3) resize事件、onresize事件處理函式：resize事件代表「使用者改變瀏覽器視窗的大小」此一操作的發生。其事件處理函式用法例如：
<body onresize="document.getElementById('tt').value+='x';">
<input id="tt" type="text" />
</body>
2. 表單事件：表示使用者對表單進行操作。表單事件之事件處理函式只能寫在表單標籤<from>之內。常用的表單事件及其事件處理函式有（以下程式碼皆寫在主體區）：
(1) reset事件、onreset事件處理函式：reset事件表示在表單中按下「reset控制項」這個操作。這不會掩蓋掉「reset控制項」原本的效果。其事件處理函式的用法如：
<form name="表單一" method="post" onreset="this.term1.size=50" >
<input name="term1" type="text" size="10"/>
<input type="reset" value="按我"/>
</form>
執行結果顯示：
按下「按我」之後，顯示：
確實已達到將文字方塊加長的效果。
※注意：script指令碼中，若欲為控制項的某個屬性設值，其寫法為：表單名稱.控制項名稱.屬性=值。在上例中，this表示該表單本身。
(2) submit事件、onsubmit事件處理函式：submit事件表示在表單5中按下「submit控制項」這個操作。其事件處理函式的用法如：
<form name="表單一" method="post" onsubmit="
if(!(this.term1.value))
{return false;}
else
{this.summit();}
" >
<input name="term1" type="text" size="10"/>
<input type="submit" value="呈交"/>
</form>
說明：上述javascript指令碼中表示：「如果term1沒有被使用者輸入，則表單不會呈交。若有被輸入，則呈交」。可用來檢查表單是否被完整輸入(這是重要應用!)。
3.控制項事件（適用於輸入控制項，也適用於其他表單控制項）：表示使用者對控制項進行操作。控制項事件的事件處理函式是寫在控制項標籤之內。常用的控制項事件有（以下程式碼皆寫在主體區）：
(1) click事件：控制項被滑鼠左鍵按下，就觸發此事件。其事件處理函式名為onclick。
(2) dbclick事件：控制項被滑鼠左鍵雙擊，就觸發此事件。其事件處理函式名為ondbclick。
(3) focus事件：控制項「成為焦點」，就觸發此事件。所謂的「成為焦點」，指的是控制項被使用者所選取而成為當前欲操作的控制項（用滑鼠點擊控制項、或用鍵盤選取都會使控制項「成為焦點」）。其事件處理函式名為onfocus。
(4) blur事件：控制項「失焦」時，就觸發此事件。所謂「失焦」，即控制項在「成為焦點」之後，使用者不再選取此控制項。譬如在點擊此控制項之後，使用者又點擊的網頁其他地方，造成此控制項「失焦」。其事件處理函式名為onblur。
(5) change事件：表單的值受到使用者的改變時，就觸發此事件。其事件處理函式名為onchange，
用法如下：
<form name="表單一" method="post" action="test2.php" >
<input name="term1" type="text" size="10" onchange="
if(this.size==10){this.size=50;}
else{this.size=10;}"/>
<input type="submit" value="呈交"/>
</form>
執行結果顯示：
輸入kk後，顯示：
重新輸入kkk後，顯示：
(6) mousedown事件：控制項被使用者按下滑鼠按鍵(左鍵右鍵均可)時會觸發。其事件處理函式名為onmousedown。
(7) mouseup事件：控制項被使用者按下滑鼠按鍵後，使用者放開按鍵(左鍵右鍵均可)，就觸發此事件。其事件處理函式名為onmouseup。
註：click事件事實上就是利用滑鼠左鍵產生mousedown事件之後，再用滑鼠左鍵產生mouseup事件。
(8) mousemove事件：滑鼠在控制項上移動，就觸發此事件。其事件處理函式名為onmousemove。
(9) mouseover事件：滑鼠移到控制項上，就觸發此事件。其事件處理函式名為onmouseover。
(10) mouseout事件：滑鼠移到控制項上後，又從控制項上移開，就觸發此事件。其事件處理函式名為onmouseout。
(11) mouseenter事件：滑鼠進入控制項中，就觸發此事件。其事件處理函式名為onmouseenter。
(12) mouseleave事件：滑鼠進入控制項後，又從控制項上移開，就觸發此事件。其事件處理函式名為onmouseleave。
(13) keydown事件：用鍵盤選取控制項（用tab鍵或快捷鍵）時、或者在選取此控制項後，使用者按下鍵盤，就觸發此事件。其事件處理函式名為onkeydown，用法如：
<input name="tt" type="text" onkeydown="this.value+='d'"/>
//執行後，在文字輸入框輸入a，顯示：
(14) keyup事件：用鍵盤選取控制項時、或者在選取此控制項後，使用者按下鍵盤之後鬆開的動作，就觸發此事件。其事件處理函式名為onkeyup。
(15) keypress事件：用鍵盤選取控制項，使用者完成整個「按」的動作後，就觸發此事件。其事件處理函式名為onkeypress。註：keypress事件事實上就是keydown事件而後再加上keyup事件。
(16) select事件：使用者選取控制項中的文字時，觸發此事件。只有對文字輸入控制項來說才有效果。其事件處理函式名為onselect，用法如：
<form name="表單一" method="post" action="test2.php" >
<input name="tt" type="text" size="10" onselect="表單一.tt.size=50"><br/>
</form>
執行後，在文字方塊內輸入ggg，顯示：
用滑鼠將ggg給選取，顯示：
(17) scroll事件：若元件具有拉條（scrollbar），則當拉條被拉動時，就會觸發此事件。其事件處理函式名為onscroll。
留言列表
javascript 教學 (1)
