JavaScript中的事件处理
JavaScript中的事件处理
在JavaScript中，事件的发生主要是由窗口中文档变化、键盘和鼠标引起的。JavaScript在某些事件发生的时候，可以通过一些相应的事件处理器来捕获这些事件，并且可以对捕获的事件做出某种处理。
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。
l 窗口文档事件
窗口文档事件指的是窗口中的文档发生变化时候发生的事件，有两种的窗口文档事件：一种是当窗口装载（load）文档的时候，另一种是当窗口退出（unload）一个文档的时候。这个时候，可以通过onLoad事件处理器来捕获窗口装载文档的事件，或者使用onUnload事件处理器来捕获窗口退出文档的事件。
<HTML>
<HEAD>
<TITLE>load/unload</TITLE>
<Script language="JavaScript">
function mytest()
{
alert("即将退出文档。");
}
</Script>
</HEAD>
<BODY onLoad="JavaScript:alert('即将装载文档。');"
onUnload="JavaScript:mytest();">
</BODY>
</HTML>
l 聚焦事件
当光标的焦点集中到页面的某些表单元素的时候，将会发生聚焦（focus）事件，使用onFocus事件处理器可以捕获它。只有表单元素text、password、select和textarea有聚焦事件发生，所以，对于其他的表单元素，不会发生聚焦事件，使用onFocus事件处理器就不会起到效果。
<HTML>
<HEAD>
<TITLE>focus</TITLE>
<Script language="JavaScript">
function focusHandle()
{
alert("光标聚焦到文本框");
}
</Script>
</HEAD>
<BODY>
<FORM NAME="TEST">
<INPUT TYPE="TEXT" NAME="UserName"
onFocus="JavaScript:focusHandle()">
</FORM>
</BODY>
</HTML>
l 失去焦点事件
和聚焦事件相对的事件是失去焦点事件。当光标从某些表单元素中移出时，表单元素将失去焦点（blur），此时将会发生失去焦点事件。使用onBlur()处理器可以对这个事件进行处理。和聚焦事件类似，只有text、password、select和textarea有失去焦点事件发生。
<HTML>
<HEAD>
<TITLE>blur</TITLE>
<Script language="JavaScript">
function blurHandle()
{
alert(document.TEST.UserName.value);
}
</Script>
</HEAD>
<BODY>
<FORM NAME="TEST">
<INPUT TYPE="TEXT" NAME="UserName"
onBlur="JavaScript:blurHandle()">
</FORM>
</BODY>
</HTML>
l 点击事件
当我们在某个表单元素上点击的时候，将会发生点击（click）事件。我们可以通过onClick()处理器来处理这个事件。表单元素button、checkbox、radio、reset、submit以及超链接都有这个事件。
<HTML>
<HEAD>
<TITLE>click</TITLE>
<Script language="JavaScript">
function validateForm()
{
if(confirm("你确认提交这个表单么？"))
{
document.TEST.submit();
}
}
</Script>
</HEAD>
<BODY>
<FORM NAME="TEST">
<INPUT TYPE="TEXT" NAME="UserName">
<BR>
<INPUT TYPE="BUTTON" NAME="SUB" VALUE="提交"
onClick="JavaScript:validateForm()">
</FORM>
</BODY>
</HTML>
l 内容改变事件
当某些表单的内容发生改变的时候，将发生“（内容）改变”（change）事件。使用onChange()处理器可以处理对应的事件。表单元素select、text、password、textarea都有这个事件。
<HTML>
<HEAD>
<TITLE>change</TITLE>
</HEAD>
<BODY>
<FORM NAME="TEST">
<INPUT TYPE="TEXT" NAME="UserName"
onChange="JavaScript:alert('文本框内容已经改变！');">
<BR>
<SELECT NAME="Year"
onChange="JavaScript:alert(this[this.selectedIndex].value);">
<OPTION VALUE="1999">1999</OPTION>
<OPTION VALUE="2000">1999</OPTION>
<OPTION VALUE="2001">2001</OPTION>
<OPTION VALUE="2002">2002</OPTION>
<OPTION VALUE="2003">2003</OPTION>
<OPTION VALUE="2004">2004</OPTION>
<OPTION VALUE="2005">2005</OPTION>
</SELECT>
<BR>
</FORM>
</BODY>
</HTML>
l 选择事件
当选中表单元素中的文本内容时，将会发生“选择（select）”事件。表单元素text、textarea都会发生这个事件。
<HTML> <HEAD> <TITLE>select</TITLE> </HEAD> <BODY> <FORM NAME="TEST"> <INPUT TYPE="TEXT" NAME="UserName" value="JS编程基础" onSelect="JavaScript:alert(this.value);"> <BR> </FORM> </BODY> </HTML>
l 提交事件
当表单提交的时候，会发生“表单提交”事件，可以通过onSubmit处理器来处理这个事件。除非onSubmit事件处理器返回的值是false，否则，表单将被提交。
<HTML>
<HEAD>
<TITLE>select</TITLE>
<Script language="JavaScript">
function checkForm()
{
if(confirm("你确认提交表单么？"))
{
return true;
}
else
{
return false;
}
}
</Script>
</HEAD>
<BODY>
<FORM NAME="TEST" onSubmit="JavaScript:return checkForm();">
<INPUT TYPE="TEXT" NAME="UserName" value="">
<BR>
<INPUT TYPE="SUBMIT" NAME="sub" value="提交表单">
</FORM>
</BODY>
</HTML>
使用JavaScript进行表单验证
使用JavaScript可以在客户端对表单进行验证。假设我们有一个登录表单，它有两个元素：text和password，用于接收用户的用户名和密码。我们要求用户必需填写用户名和密码，否则肯定不能登录。如果我们在服务器端来验证，在实现上当然行得通，但是这种方式有一个弊端：如果用户没有输入用户名或者密码，那么他只有在提交到服务器端进行处理以后才可以得到错误信息，这无形中加重了服务器的负担，也浪费了带宽。所以通常情况下，我们会将一部分不涉及数据库的验证放到客户端来完成。通过JavaScript，我们就可以简单实现这个功能。
<HTML>
<HEAD>
<TITLE>change</TITLE>
</HEAD>
<BODY>
<FORM NAME="TEST" METHOD="post" ACTION="Login.jsp">
用户名：<INPUT TYPE="TEXT" NAME="UserName">
<BR>
密码：<INPUT TYPE="PASSWORD" NAME="Pwd">
<BR>
<INPUT TYPE="BUTTON" VALUE="提交"
onClick="JavaScript:checkForm();">
</FORM>
</BODY>
</HTML>
<Script language="JavaScript">
function checkForm()
{
//定义一个变量，引用表单对象
var theForm = document.TEST;
if(theForm.UserName.value=="")
{
alert("请输入用户名！");
theForm.UserName.focus();
}
else if(theForm.Pwd.value=="")
{
alert("请输入密码！");
theForm.Pwd.focus();
}
else
{
theForm.submit();
}
}
</Script>
