JavaScript处理各种事件详解

当前位置：知识管理交流 →『技术文档交流』

liguoquan

2023年11月18日 10:6 本文热度 301

：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协同办公管理系统。