JavaScript處理各種事件詳解

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

liguoquan

2023年11月18日 10:6 本文熱度 591

：Javascript處理各種事件詳解

Javascript處理各種事件詳解

圖1 大力按下電梯中的求助按鈕，維護人員就會來修理電梯

當用戶在網頁上執行移動鼠標、點擊按鈕、提交表單等操作，會觸發相應的事件，Javascript腳本可以對特定的事件進行處理，從而實現與用戶的交互。

例如當用戶點擊網頁上的按鈕，會觸發onclick事件。如圖2所示，以下代碼表明當用戶點擊add按鈕，瀏覽器會執行Javascript腳本中的add()函數：

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

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

表1列出了常用的事件，對這些事件的觸發時機作了說明。這些事件可分為三類：表單相關事件、鼠標鍵盤事件、頁面相關事件。

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

1. onfocus獲得焦點和onblur失去焦點事件

例程1的focus.html演示處理onfocus和onblur事件。當焦點進入網頁上的username文本輸入框，該輸入框的背景色變為綠色，當焦點離開，背景色改為白色。

例程1 focus.html

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

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

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

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

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

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

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

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

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

例程2的form.html演示了對onsubmit事件的處理過程。當onsubmit事件觸發后，瀏覽器首先執行dosubmit()函數。接下來，瀏覽器會根據dosubmit()函數的返回值來決定是否請求訪問后端的hello.jsp。如果該函數返回true，瀏覽器就會請求訪問hello.jsp；如果該函數返回false，則不會請求訪問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()函數會檢查username文本輸入框，如果值為空，就提示用戶輸入username，并返回false；否則返回true。因此，只有當username文本輸入框不為空，瀏覽器才會把表單提交給后端的hello.jsp，參見圖4。

圖4 dosubmit()函數的執行流程

例程3是hello.jsp的代碼，它會讀取表單中的username輸入框的值，并把它輸出到網頁中。

例程3 hello.jsp

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

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

當用戶在form.html的表單的username輸入框中輸入weiqin，hello.jsp會返回“Hello，weiqin”，參見圖5。

圖5 后端hello.jsp處理用戶提交表單的請求

3. onclick鼠標單擊事件

當用戶單擊網頁上的按鈕、圖片等元素，會觸發onclick事件。例程4的bgcolor.html會在網頁上顯示一個change按鈕，點擊該按鈕，網頁的背景色會在紅色與白色之間切換。document.bgColor表示網頁的背景色。

例程4 bgcolor.html

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

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

4. onmouseover鼠標移入和onmouseout鼠標移出事件

當用戶在網頁上把鼠標移入某個元素的區域，會觸發onmouseover事件，把鼠標移出某個元素的區域，會觸發onmouseout事件。例程5的opacity.html演示了對這兩種事件的處理。

例程5 opacity.html

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

opacity.html會顯示一張圖片，當鼠標移入該圖片區域，圖片的透明度設為1，當鼠標移出該圖片區域，透明度設為0.3，參見圖6。visible(element,n)函數中的element參數表示鼠標移入的元素或移出的元素，此處為圖片。參數n表示圖片的透明度。

圖6 圖片的透明度隨著鼠標的移入和移出發生改變

5. onkeydown按鍵事件

當用戶在網頁上按下鍵盤的鍵就會觸發onkeydown事件。例程6的box.html演示了對onkeydown事件的處理。

例程6 box.html

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

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

box.html會在網頁上顯示一個紅色的色塊，當按下鍵盤的LEFT、RIGHT、UP、DOWN鍵，色塊就會向相應的方向移動，參見圖7。

圖7 通過鍵盤上的方向鍵來移動色塊

6. onload頁面加載和onunload頁面卸載事件

當用戶訪問某個網頁，瀏覽器就會先加載該網頁，此時會觸發onload事件。當用戶離開網頁、刷新網頁或關閉瀏覽器時，會觸發onunload事件。

例程7的page.html在例程-5的opacity.html的基礎上，增加了對onload事件的處理。當瀏覽器加載page.html頁面時，會把頁面上圖片的透明度設為0.3。document.images[0]表示頁面上的第一個圖片。

例程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){
  // 設置圖片的透明度  element.style.opacity=n;}</script></body>

該文章在 2023/11/18 10:06:56 編輯過

關鍵字查詢

各種

處理

正在查詢...

點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。

點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。

點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。

狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

JavaScript處理各種事件詳解