第 7 章

第7章 事件处理

学习目标 • 了解什么是事件以及事件的调用 • 了解常用事件 • 掌握鼠标键盘事件 • 掌握页面事件 • 掌握表单事件 • 掌握滚动字幕事件 • 掌握编辑事件

本章目录 • 7.1 事件的基本概念 • 7.2 鼠标键盘事件 • 7.3 页面事件 • 7.4 表单事件 • 7.5 滚动字幕事件 • 7.6 编辑事件 √ √ √ √ √ √

7.1 事件的基本概念 • 什么是事件 • 事件处理程序的调用 • JavaScript的常用事件 √ √ √

什么是事件 事件是用户在访问页面时执行的操作。当浏览器探测到一个事件时，比如鼠标点击或按键，它可以触发与这个事件相关联的JavaScript对象，这些对象称为事件处理程序。事件处理是一项重要技术，它包含了用户与页面的所有交互。

什么是事件处理器 • 事件处理器是一段JavaScript脚本，事件处理器的名称通常是在事件类型的前面加上on作为前缀，习惯上规定，事件处理器名称中的事件类型的各个单词的首字母要大写。 • 例：click事件的事件处理器名称为onClick。

事件处理器的绑定方法 • 使用HTML标签属性绑定事件处理器 • 使用JavaSript对象属性绑定事件处理器 • 使用<script>标签的属性绑定事件处理器

事件处理程序的调用 在使用事件处理程序对页面进行操作时，最主要的是如何通过对象的事件来指定事件处理程序，其指定方式主要有三种方法：（1）通过HTML标记使用事件该方法是直接在HTML标记中指定事件处理程序，例如在<body>和<input>标记中指定。 <标记 … … 事件="事件处理程序" [事件="事件处理程序" ...]> 在以上语法中的事件处理程序可以是JavaScript语句，也可是自定义函数，如果是JavaScript语句，可以在语句的后面以分号（;）作为分隔符，执行多条语句。例7.1 在页面加载完成后将弹出一个“欢迎进入本网页”的对话框，在用户退出页面后，弹出一个“谢谢浏览”对话框。代码如下： <body onLoad="alert('欢迎进入本网页')" onunLoad="alert('谢谢浏览')" > 在浏览器中预览网页，效果如图7.3和图7.4所示。

事件处理程序的调用 在“确定”按钮的单击事件中，用多行代码改变页面中“JavaScript教程”文本的字体样式。其操作过程是在页面加载后，文本会以“宋体”格式进行显示，在单击“确定”按钮后，将弹出一个输入提示框，向该提示框的文本框中输入1，单击“确定”按钮，这时，将关闭提示框，将页面中的文本以“华文行楷”格式进行显示，程序代码如下。 <form name="form1" method="post" action=""> JavaScript教程 </form> <form name="form2" method="post" action=""> <input type="button" name="Button" value="确定" onclick="Sfont=prompt('请输入数字1','','提示框');if (Sfont=='1'){sf='粗体字';form1.style.fontFamily='华文行楷';}"> </form> 在浏览器中预览网页，效果如图7.5、图7.6和图7.7所示。

事件处理程序的调用 （2）指定特定对象的特定事件该方法是在JavaScript的<script>标记中指定特定的对象，以及该对象要执行的事件名称，并在<script>和</script>标记中编写事件处理程序代码。 <script language="JavaScript" for="对象" event="事件"> … //事件处理程序代码 … </script> 例如，用<script>和</script>标记来完成页面加载和关闭时显示对话框。代码如下： <script language="javascript" for="window" event="onload"> alert("欢迎进入本页面"); </script> <script language="javascript" for="window" event="onunload"> alert("谢谢浏览"); </script> （3）通过JavaScript代码使用事件该方法是在JavaScript脚本中直接对各对象的事件及事件所调用的函数进行声明，不用在HTML标记中指定要执行的事件。 <事件主角 - 对象>.<事件> = <事件处理程序>;

事件处理程序的调用 例7.2 直接在JavaScript脚本中执行按钮的单击事件，而不用在按钮的<input>标记中调用单击事件。该例将pp()函数定义为Button按钮的onclick事件的处理过程，程序代码如下。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>通过JavaScript代码使用事件</title> </head> <input type="button" name="Button" value="确定"> <script language="javascript"> function pp() { alert("欢迎使用JavaScript教程"); } Button.onclick=pp; </script> <body> </body></html> 在浏览器中预览网页，效果如图7.8所示。

JavaScript的常用事件 为了便于读者查找JavaScript中的所有事件，下面以表格的形式对各事件进行说明。如表10.1所示。

JavaScript的常用事件 续表

课堂练习——基本事件模型综合训练 • 页面中放置两个超链接和一个按钮 • 当鼠标滚动到第一个超链接时会弹出警告对话框，显示超链接的URL地址（this.href） • 当单击第二个超链接时，浏览器不会导航到链接所指定的页面（return false） • 当单击按钮时浏览器会导航到第二个超链接所指定的页面（window.location=document.getElementById(“第二个超链接的id").href）

7.2 鼠标键盘事件 鼠标和键盘事件是在页面操作中使用最频繁的操作，可以利用鼠标事件在页面中实现鼠标移动、单击时的特殊效果。也可以利用键盘事件来制作页面的快捷键等。 • 鼠标的单击事件 • 鼠标的按下或松开事件 • 鼠标的移入移出事件 • 鼠标移动事件 • 键盘事件 √ √ √ √ √

鼠标的单击事件 单击事件（onclick）是在鼠标单击时被触发的事件。单击是指鼠标停留在对象上，按下鼠标键，在没有移动鼠标的同时放开鼠标键的这一完整过程。单击事件一般应用于Button对象、Checkbox对象、Image对象、Link对象、Radio对象、Reset对象和Submit对象，Button对象一般只会用到onclick事件处理程序，因为该对象不能从用户那里得到任何信息，如果没有onclick事件处理程序，按钮对象将不会有任何作用。例7.3 通过按钮变换背景颜色，单击“变换背景”按钮，动态的改变页面的背景颜色，当用户再次单击按钮时，页面背景将以不同的颜色进行显示，效果如图7.9、图7.10所示。

鼠标的单击事件 程序代码如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>通过按钮变换背景颜</title> </head> <body> <script language="javascript"> var Arraycolor=new Array("olive","teal","red","blue","maroon","navy","lime","fuschia","green","purple","gray","yellow","aqua","white","silver"); var n=0; function turncolors(){ if (n==(Arraycolor.length-1)) n=0; n++; document.bgColor = Arraycolor[n]; } </script> <form name="form1" method="post" action=""> <p> <input type="button" name="Submit" value="变换背景" onclick="turncolors()"> </p> <p>用按钮随意变换背景颜色.</p> </form> </body> </html>

鼠标的按下或松开事件 鼠标的按下或松开事件分别是onmousedown和onmouseup事件。其中，onmousedown事件用于在鼠标按下时触发事件处理程序，onmouseup事件是在鼠标松开时触发事件处理程序。在用鼠标单击对象时，可以用这两个事件实现其动态效果。例7.4 用onmousedown和onmouseup事件将文本制作成类似于<a>（超链接）标记的功能，也就是在文本上按下鼠标时，改变文本的颜色，当在文本上松开鼠标时，恢复文本的默认颜色，并弹出一个空页（可以链接任意网页）。运行结果如图7.11和图7.12所示。

鼠标的按下或松开事件 程序代码如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>通过按钮变换背景颜</title> </head> <body> <script language="javascript"> var Arraycolor=new Array("olive","teal","red","blue","maroon","navy","lime","fuschia","green","purple","gray","yellow","aqua","white","silver"); var n=0; function turncolors(){ if (n==(Arraycolor.length-1)) n=0; n++; document.bgColor = Arraycolor[n]; } </script> <form name="form1" method="post" action=""> <p> <input type="button" name="Submit" value="变换背景" onclick="turncolors()"> </p> <p>用按钮随意变换背景颜色.</p> </form> </body></html>

鼠标的移入移出事件 鼠标的移入和移出事件分别是onmouseover和onmousemove事件。其中，onmouseover事件在鼠标移动到对象上方时触发事件处理程序，onmousemove事件在鼠标移出对象上方时触发事件处理程序。可以用这两个事件在指定的对象上移动鼠标时，实现其对象的动态效果。例7.5 鼠标在图片上移入或移出时，动态改变图片的焦点，主要是用onmouseover和onmouseout事件来完成鼠标的移入和移出动作。运行结果如图7.13、图7.14所示。

鼠标的移入移出事件 程序代码如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title> 鼠标移动时改变图片焦点</title> </head> <body> <script language="javascript">  </script> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td align="center" bgcolor="#CCCCCC"> <img src="Temp.jpg" border="0" style="filter:alpha(opacity=100)" onMouseOver="visible(this,1)" onMouseOut="visible(this,0)" width="148" height="121"> </td> </tr> </table> </body></html>

鼠标移动事件 鼠标移动事件（onmousemove）是鼠标在页面上进行移动时触发事件处理程序，可以在该事件中用document对象实时读取鼠标在页面中的位置。例7.6 鼠标在页面中移动时，在页面的状态栏中显示当前鼠标在页面上的位置，也就是（x,y）值。运行效果如图7.15所示。

鼠标移动事件 程序代码如下： <html> <head> <title>在状态栏中显示鼠标的在页面中的当前位置</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body> <script language="javascript">  </script>

鼠标移动事件案例 • 当鼠标移到图片上时图片会变成半透明，而当鼠标离开图片时图片又会恢复成不透明

<HTML> <HEAD> <TITLE>半透明图片</TITLE> <STYLE> .aIMG{ filter:alpha(opacity=100) } </STYLE> <SCRIPT LANGUAGE="javascript"> function Change(obj) { obj.filters.alpha.opacity = 50; } function Restore(obj) { obj.filters.alpha.opacity = 100; } </SCRIPT> </HEAD> <BODY> <IMG SRC="ad.gif" class="aIMG" onmouseover="javascript:Change(this);" onmouseout="javascript:Restore(this);"> </BODY> </HTML>

下拉列表超链接案例

<HTML> <HEAD> <TITLE>下拉式菜单超级链接</TITLE> <SCRIPT LANGUAGE="javascript"> function GO(){ newWin = open(); newWin.location.href = document.myForm.mySelect.options[document.myForm.mySelect.selectedIndex].value; } </SCRIPT> </HEAD> <BODY> <FORM NAME="myForm"> <SELECT NAME="mySelect" SIZE="1"> <OPTION VALUE="http://cn.yahoo.com">雅虎</OPTION> <OPTION VALUE="http://www.baidu.com">百度</OPTION> <OPTION VALUE="http://www.google.cn">Google</OPTION> </SELECT> <INPUT TYPE="BUTTON" VALUE="GO!" onclick="javascript:GO()"> </FORM> </BODY> </HTML>

课堂练习

键盘事件 键盘事件包含onkeypress、onkeydown和onkeyup事件，其中onkeypress事件是在键盘上的某个键被按下并且释放时触发此事件的处理程序，一般用于键盘上的单键操作。Onkeydown事件是在键盘上的某个键被按下时触发此事件的处理程序，一般用于组合键的操作。Onkeyup事件是在键盘上的某个键被按下后松开时触发此事件的处理程序，一般用于组合键的操作。为了便于读者对键盘上的按键进行操作，下面以表格的形式给出其键码值。下面是键盘上字母和数字键的键码值，如表7.2所示。

键盘事件 下面是数字键盘上按键的键码值，如表7.3所示。

键盘事件 下面是键盘上控制键的键码值，如表7.4所示。

键盘事件 如果想要在JavaScript中使用组合键，可以利用event.ctrlKey，event.shiftKey，event.altKey判断是否按下了ctrl键、shift键以及alt键。例7.7 下面的实例是应用键盘中的〈A〉键，对页面进行刷新，而无需用鼠标在IE浏览器中单击“刷新”按钮，程序代码如下。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>刷新页面</title> </head> <body> <img src="flower.jpg" width="256" height="187" /> <script language="javascript">  </script> </body> </html> 在浏览器中预览网页，效果如图7.16所示。

7.3 页面事件 页面事件是在页面加载或改变浏览器大小、位置，以及对页面中的滚动条进行操作时，所触发的事件处理程序。本节将通过页面事件对浏览器进行相应的控制。 • 加载与卸载事件 • 页面大小事件 √ √

加载与卸载事件 加载事件（onload）是在网页加载完毕后触发相应的事件处理程序，它可以在网页加载完成后对网页中的表格样式、字体、背景颜色等进行设置。卸载事件（unload）是在卸载网页时触发相应的事件处理程序，卸载网页是指关闭当前页或从当前页跳转到其他网页中，该事件常被用于在关闭当前页或跳转其他网页时，弹出询问提示框。在制作网页时，为了便于网页资原的利用，可以在网页加载事件中对网页中的元素进行设置。下面以示例的形式讲解如何在页面中合理利用图片资原。例7.8 在网页加载时，将图片缩小成指定的大小，当鼠标移动到图片上时，将图片大小恢复成原始大小，这样可以必免使用大小相同的两个图片进行切换，并在关闭网页时，用提示框提示用户是否关闭当前页。结果如图7.17、图7.18所示。

加载与卸载事件 程序代码如下： <html> <head> <title>网页加载时缩小图片</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body onunload="pclose()"> <img src="image1.jpg" name="img1" onload="blowup(this)" onmouseout="blowup()" onmouseover="reduce()"> <script language="javascript">  </script> </body></html>

页面大小事件 页面的大小事件（onresize）是用户改变浏览器的大小时触发事件处理程序，它主要用于固定浏览器的大小。例7.9 是在用户打开网页时，将浏览器以固定的大小显示在屏幕上，当用鼠标拽动浏览器边框改变其大小时，浏览器将恢复原始大小。结果如图7.19所示。程序代码如下： <html> <head> <title>固定浏览器的大小</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body> <center><img src="1.jpg" width="544" height="327"></center> <script language="JavaScript"> function fastness(){ window.resizeTo(600,450); } document.body.onresize=fastness; document.body.onload=fastness; </script> </body> </html>

7.4 表单事件 表单事件实际上就是对元素获得或失去焦点的动作进行控制。可以利用表单事件来改变获得或失去焦点的元素样式，这里所指的元素可以是同一类型，也可以是多个不同类型的元素。 • 获得焦点与失去焦点事件 • 失去焦点修改事件 • 表单提交与重置事件 √ √ √

获得焦点与失去焦点事件 获得焦点事件（onfocus）是当某个元素获得焦点时触发事件处理程序。失去焦点事件（onblur）是当前元素失去焦点时触发事件处理程序。在一般情况下，这两个事件是同时使用的。例7.10 用户选择页面中的文本框时，改变文本框的背景颜色，当选择其他文本框时，将失去焦点的文本框背景颜色恢复原始状态。结果如图7.20所示。程序代码如下： <html> <head> <title>文本框获得焦点时改变背景颜色</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body> <table align="center" width="337" height="204" border="0"> <tr> <td width="108">用户名:</td> <td width="213"><form name="form1" method="post" action=""> <input type="text" name="textfield" onfocus="txtfocus()" onBlur="txtblur()"> </form></td> </tr> <tr> <td>密码:</td> <td><form name="form2" method="post" action=""> <input type="text" name="textfield2" onfocus="txtfocus()" onBlur="txtblur()"> </form></td> </tr>

获得焦点与失去焦点事件 <tr> <td>真实姓名:</td> <td><form name="form3" method="post" action=""> <input type="text" name="textfield3" onfocus="txtfocus()" onBlur="txtblur()"> </form></td> </tr> <tr> <td>性别:</td> <td><form name="form4" method="post" action=""> <input type="text" name="textfield5" onfocus="txtfocus()" onBlur="txtblur()"> </form></td> </tr> <tr> <td>邮箱:</td> <td><form name="form5" method="post" action=""> <input type="text" name="textfield4" onfocus="txtfocus()" onBlur="txtblur()"> </form></td> </tr> </table>

获得焦点与失去焦点事件 <script language="javascript">  </script> </body></html>

失去焦点修改事件 失去焦点修改事件（onchange）是当前元素失去焦点并且元素的内容发生改变时触发事件处理程序。该事件一般在下拉文本框中使用。例7.11 是在用户选择下拉文本框中的颜色时，通过onchange事件来相应的改变文本框的字体颜色。结果如图7.21所示。程序代码如下： <html> <head> <title>用下拉文本框改变字体颜色</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body> <form name="form1" method="post" action=""> <input name="textfield" type="text" value="JavaScript教程"> <select name="menu1" onChange="Fcolor()"> <option value="black">黑</option> <option value="yellow">黄</option> <option value="blue">蓝</option> <option value="green">绿</option> <option value="red">红</option> <option value="purple">紫</option> </select> </form>

失去焦点修改事件 <script language="javascript">  </script> </body> </html>

表单提交与重置事件 表单提交事件（onsubmit）是在用户提交表单时（通常使用“提交”按钮，也就是将按钮的type属性设为submit）,在表单提交之前被触发，因此，该事件的处理程序通过返回false值来阻止表单的提交。该事件可以用来验证表单输入项的正确性。表单重置事件（onreset）与表单提交事件的处理过程相同，该事件只是将表单中的各元素的值设置为原始值。一般用于清空表单中的文本框。下面给出这两个事件的使用格式： <form name="formname" onReset="return Funname" onsubmit="return Funname " ></form> formname：表单名称。 Funname：函数名或执行语句，如果是函数名，在该函数中必须有布尔型的返回值。例7.12 提交表单时，通过onsubmit事件判断表单中是否有空文本框，如果有，则不允许提交，并通过表单的onreset事件将表单中的文本框清空，以便重新输入信息。结果如图7.22所示。

表单提交与重置事件 程序代码如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>表单提交的验证</title> </head> <body style="font-size:12px"> <table width="487" height="333" border="0" align="center" cellpadding="0" cellspacing="0" background="bg.JPG"> <tr> <td align="center" valign="top"><br> <br> <br> <br> <br> <table width="86%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#6699CC"> <form name="form1" onReset="return AllReset()" onsubmit="return AllSubmit()"> <tr bgcolor="#FFFFFF"> <td height="22" align="right">所属类别:</td> <td height="22" align="left"> <select name="txt1" id="txt1"> <option value="数码设备">数码设备</option> <option value="家用电器">家用电器</option> <option value="礼品工艺">礼品工艺</option> </select> <select name="txt2" id="txt2"> <option value="数码相机">数码相机</option> <option value="打印机">打印机</option> </select></td> </tr>

表单提交与重置事件 <tr bgcolor="#FFFFFF"> <td height="22" align="right">商品名称:</td> <td height="22" align="left"><input name="txt3" type="text" id="txt3" size="30" maxlength="50"></td> </tr> <tr bgcolor="#FFFFFF"> <td height="22" align="right">会员价:</td> <td height="22" align="left"><input name="txt4" type="text" id="txt4" size="10"></td> </tr> <tr bgcolor="#FFFFFF"> <td height="22" align="right">提供厂商:</td> <td height="22" align="left"><input name="txt5" type="text" id="txt5" size="30" maxlength="50"></td> </tr> <tr bgcolor="#FFFFFF"> <td height="22" align="right">商品简介:</td> <td height="22" align="left"><textarea name="txt6" cols="35" rows="4" id="txt6"></textarea></td> </tr> <tr bgcolor="#FFFFFF"> <td height="22" align="right">商品数量:</td> <td height="22" align="left"><input name="txt7" type="text" id="txt7" size="10"></td> </tr> <tr bgcolor="#FFFFFF"> <td height="22" colspan="2" align="center"><input name="sub" type="submit" id="sub2" value="提交"> <input type="reset" name="Submit2" value="重置"> </td> </tr> </form> </table></td> </tr> </table>

表单提交与重置事件 <script language="javascript">  </script> </body> </html>

7.5 滚动字幕事件 字幕滚动事件主要是在<marquee>标记中使用，该标记虽然不能实现多样化的字幕滚动效果，但应用起来十分简单，可以使用最少的语句来实现字幕滚动的效果。 • onbounce事件 • onstart事件 √ √

onbounce事件 onbounce事件是在<marquee>标记中的内容滚动到上下或左右边界时触发的事件处理程序，该事件只有在<marquee>标记的behavior属性设为aloernate时才有效。例7.13 将<marquee>标记的behavior属性设为aloernate，direction属性设置为up，使字幕可以在页面中上下循环滚动，并通过onbounce事件在字幕到达窗口边界时，修改scrollAmount属性值，改变字幕的滚动速度。结果如图7.23所示。

第 7 章

第 7 章

Presentation Transcript