Javascript處理各種事件詳解

圖1 大力按下電梯中的求助按鈕，維護(hù)人員就會(huì)來(lái)修理電梯

當(dāng)用戶在網(wǎng)頁(yè)上執(zhí)行移動(dòng)鼠標(biāo)、點(diǎn)擊按鈕、提交表單等操作，會(huì)觸發(fā)相應(yīng)的事件，Javascript腳本可以對(duì)特定的事件進(jìn)行處理，從而實(shí)現(xiàn)與用戶的交互。

例如當(dāng)用戶點(diǎn)擊網(wǎng)頁(yè)上的按鈕，會(huì)觸發(fā)onclick事件。如圖2所示，以下代碼表明當(dāng)用戶點(diǎn)擊add按鈕，瀏覽器會(huì)執(zhí)行Javascript腳本中的add()函數(shù)：

<input type="button" value="add" onclick="add()"  />

圖2 Javascript腳本的add()函數(shù)處理onclick事件

表1列出了常用的事件，對(duì)這些事件的觸發(fā)時(shí)機(jī)作了說(shuō)明。這些事件可分為三類：表單相關(guān)事件、鼠標(biāo)鍵盤(pán)事件、頁(yè)面相關(guān)事件。

表1 JavaScrip腳本可以處理的事件

1. onfocus獲得焦點(diǎn)和onblur失去焦點(diǎn)事件

例程1的focus.html演示處理onfocus和onblur事件。當(dāng)焦點(diǎn)進(jìn)入網(wǎng)頁(yè)上的username文本輸入框，該輸入框的背景色變?yōu)榫G色，當(dāng)焦點(diǎn)離開(kāi)，背景色改為白色。

例程1 focus.html

<form name="myform">
   username：<input type="text" name="username"                        
               onfocus="dofocus()"  onblur="doblur()" /></form><script> function dofocus(){
  // 獲得當(dāng)前的事件  var event=window.event;
  // 獲得觸發(fā)當(dāng)前事件的元素 
  var element=event.srcElement; 
  // 把元素的背景色改為綠色  element.style.background="#00FF00"    }function doblur(){
  // 獲得當(dāng)前的事件  var event=window.event;
  // 獲得觸發(fā)當(dāng)前事件的元素 
  var element=event.srcElement; 
  // 把元素的背景色改為白色  element.style.background="#FFFFFF"    }</script>

在dofocus()函數(shù)中，window.event表示當(dāng)前的onfocus事件，event.srcElement表示觸發(fā)當(dāng)前事件的username文本輸入框，element.style.background表示username文本輸入框的背景色。

在本范例中，dofocus()函數(shù)把username文本輸入框的背景色改為綠色，doblur()函數(shù)把背景色改為白色，參見(jiàn)圖3。

圖3 Javascript腳本會(huì)改變username文本框的背景顏色

2. onsubmit表單提交和onreset表單重置事件

當(dāng)用戶按下表單中的提交按鈕，會(huì)觸發(fā)onsubmit事件，按下重置按鈕，會(huì)觸發(fā)onreset事件。 以下輸入框的type屬性的值分別為submit和reset，分別表示提交按鈕和重置按鈕：

<input type="submit" value="submit" />  
<input type="reset" value="reset" />  

以下代碼指定dosubmit()函數(shù)處理onsubmit事件，doreset()函數(shù)處理onreset事件，action屬性指定把表單提交給后端的hello.jsp處理：

<form name="myform" 
       onsubmit="return dosubmit()"
       onreset="doreset()" 
       action="hello.jsp">

例程2的form.html演示了對(duì)onsubmit事件的處理過(guò)程。當(dāng)onsubmit事件觸發(fā)后，瀏覽器首先執(zhí)行dosubmit()函數(shù)。接下來(lái)，瀏覽器會(huì)根據(jù)dosubmit()函數(shù)的返回值來(lái)決定是否請(qǐng)求訪問(wèn)后端的hello.jsp。如果該函數(shù)返回true，瀏覽器就會(huì)請(qǐng)求訪問(wèn)hello.jsp；如果該函數(shù)返回false，則不會(huì)請(qǐng)求訪問(wèn)hello.jsp。

例程2 form.html

<form name="myform"  action="hello.jsp"
       onsubmit="return dosubmit()" >
  username：<input type="text" name="username" />                  
  <input type="submit" value="submit" />  
  <input type="reset" value="reset" />  </form><script> function dosubmit(){
  var isSubmit=true; 

  if(myform.username.value==""){
    alert("Please input username.");
    isSubmit=false;
  }  

  return isSubmit;}</script>

以上dosubmit()函數(shù)會(huì)檢查username文本輸入框，如果值為空，就提示用戶輸入username，并返回false；否則返回true。因此，只有當(dāng)username文本輸入框不為空，瀏覽器才會(huì)把表單提交給后端的hello.jsp，參見(jiàn)圖4。

圖4 dosubmit()函數(shù)的執(zhí)行流程

例程3是hello.jsp的代碼，它會(huì)讀取表單中的username輸入框的值，并把它輸出到網(wǎng)頁(yè)中。

例程3 hello.jsp

 <%
    // 讀取表單中的username輸入框的值    String username = request.getParameter("username");
  %>

  <h1>Hello,<%= username %></h1>

當(dāng)用戶在form.html的表單的username輸入框中輸入weiqin，hello.jsp會(huì)返回“Hello，weiqin”，參見(jiàn)圖5。

圖5 后端hello.jsp處理用戶提交表單的請(qǐng)求

3. onclick鼠標(biāo)單擊事件

當(dāng)用戶單擊網(wǎng)頁(yè)上的按鈕、圖片等元素，會(huì)觸發(fā)onclick事件。 例程4的bgcolor.html會(huì)在網(wǎng)頁(yè)上顯示一個(gè)change按鈕，點(diǎn)擊該按鈕，網(wǎng)頁(yè)的背景色會(huì)在紅色與白色之間切換。document.bgColor表示網(wǎng)頁(yè)的背景色。

例程4 bgcolor.html

<form name="myform" >
 <input type="button" value="change" onclick="doclick()"  /></form><script>var isRed=true;function doclick(){  // 切換網(wǎng)頁(yè)的背景色  if(isRed)
    document.bgColor="red";
  else
    document.bgColor="white";

  isRed=!isRed;       // isRed變量的值取反}</script>

4. onmouseover鼠標(biāo)移入和onmouseout鼠標(biāo)移出事件

當(dāng)用戶在網(wǎng)頁(yè)上把鼠標(biāo)移入某個(gè)元素的區(qū)域，會(huì)觸發(fā)onmouseover事件，把鼠標(biāo)移出某個(gè)元素的區(qū)域，會(huì)觸發(fā)onmouseout事件。例程5的opacity.html演示了對(duì)這兩種事件的處理。

例程5 opacity.html

<img src="logo.gif" 
      onmouseover="visible(this,1)"
      onmouseout="visible(this,0.3)"  /><script>function visible(element,n){
  // 設(shè)置圖片的透明度  element.style.opacity=n;}</script>

opacity.html會(huì)顯示一張圖片，當(dāng)鼠標(biāo)移入該圖片區(qū)域，圖片的透明度設(shè)為1，當(dāng)鼠標(biāo)移出該圖片區(qū)域，透明度設(shè)為0.3，參見(jiàn)圖6。visible(element,n)函數(shù)中的element參數(shù)表示鼠標(biāo)移入的元素或移出的元素，此處為圖片。參數(shù)n表示圖片的透明度。

圖6 圖片的透明度隨著鼠標(biāo)的移入和移出發(fā)生改變

5. onkeydown按鍵事件

當(dāng)用戶在網(wǎng)頁(yè)上按下鍵盤(pán)的鍵就會(huì)觸發(fā)onkeydown事件。例程6的box.html演示了對(duì)onkeydown事件的處理。

例程6 box.html

<div id="box"></div><script>// 獲取頁(yè)面中id為box的元素var box = document.getElementById("box");  box.style.position = "absolute";    // 色塊絕對(duì)定位box.style.width = "20px";            // 色塊寬度box.style.height = "20px";           // 色塊高度box.style.backgroundColor = "red";  // 色塊背景色// 指定處理onkeydown事件的函數(shù)document.onkeydown = dokeydown;// 方向鍵控制色塊移動(dòng)function dokeydown(){  
  var event = window.event;  
  switch(event.keyCode){  // 獲取當(dāng)前按下鍵盤(pán)鍵的編碼    case 37 :  // 按下LEFT箭頭鍵，向左移動(dòng)5個(gè)像素                box.style.left = box.offsetLeft - 5  + "px";
                break;
    case 39 :  // 按下RIGHT箭頭鍵，向右移動(dòng)5個(gè)像素                box.style.left = box.offsetLeft + 5 + "px";
                break;
    case 38 :  // 按下UP箭頭鍵，向上移動(dòng)5個(gè)像素                box.style.top = box.offsetTop  - 5 + "px";
                break;
    case 40 :  // 按下DOWN箭頭鍵，向下移動(dòng)5個(gè)像素                box.style.top = box.offsetTop  + 5 + "px";
                break;
  }}</script>

在dokeydown()函數(shù)中，event.keyCode表示鍵的鍵碼。每個(gè)鍵都有固定的鍵碼，例如LEFT、RIGHT、UP、DOWN鍵的鍵碼分別為37、39、38、40。

box.html會(huì)在網(wǎng)頁(yè)上顯示一個(gè)紅色的色塊，當(dāng)按下鍵盤(pán)的LEFT、RIGHT、UP、DOWN鍵，色塊就會(huì)向相應(yīng)的方向移動(dòng)，參見(jiàn)圖7。

圖7 通過(guò)鍵盤(pán)上的方向鍵來(lái)移動(dòng)色塊

6. onload頁(yè)面加載和onunload頁(yè)面卸載事件

當(dāng)用戶訪問(wèn)某個(gè)網(wǎng)頁(yè)，瀏覽器就會(huì)先加載該網(wǎng)頁(yè)，此時(shí)會(huì)觸發(fā)onload事件。當(dāng)用戶離開(kāi)網(wǎng)頁(yè)、刷新網(wǎng)頁(yè)或關(guān)閉瀏覽器時(shí)，會(huì)觸發(fā)onunload事件。

例程7的page.html在例程-5的opacity.html的基礎(chǔ)上，增加了對(duì)onload事件的處理。當(dāng)瀏覽器加載page.html頁(yè)面時(shí)，會(huì)把頁(yè)面上圖片的透明度設(shè)為0.3。document.images[0]表示頁(yè)面上的第一個(gè)圖片。

例程7 page.html

<body onload="visible(document.images[0],0.3)"><img src="logo.gif" onmouseover="visible(this,1)"
      onmouseout="visible(this,0.3)"   /><script>function visible(element,n){
  // 設(shè)置圖片的透明度  element.style.opacity=n;}</script></body>