JavaScript事件

时间：2022-10-15 百科知识版权反馈

【摘要】：事件驱动是JavaScript的基本特征之一，JavaScript定义了若干事件，如鼠标的单击和双击、按下键盘、页面被载入等。在网页中常常通过这些事件来触发程序或函数的执行。实际上，事件在此的含义就是用户与Web页面交互时产生的操作。浏览器响应事件并进行处理的过程称为事件处理，进行这种处理的代码称为事件响应函数。在例5-3.html中，已经使用过onclick事件。这两个事件通常成对使用，实现动态效果。此外，JavaScript提供的事件还包括onFocus、onSelect、onBlur

5.1.3　JavaScript事件

事件驱动是JavaScript的基本特征之一，JavaScript定义了若干事件，如鼠标的单击和双击、按下键盘、页面被载入等。在网页中常常通过这些事件来触发程序或函数的执行。例如，当用户单击一个按键或者在某段文字上移动鼠标时，就触发了一个单击事件或鼠标移动事件，通过对这些事件的响应，可以完成特定的功能(例如，单击按钮弹出对话框，鼠标移动到文本上后文本变色等)。实际上，事件在此的含义就是用户与Web页面交互时产生的操作。当用户进行单击按钮操作时，即产生了一个事件，需要浏览器进行处理。浏览器响应事件并进行处理的过程称为事件处理，进行这种处理的代码称为事件响应函数。

JavaScript事件分为鼠标和键盘相关事件、浏览器相关事件以及表单样式相关事件几类。

与鼠标和键盘相关的事件有:onClick，onDbClick，onMouseOver，onMouseOut，onMouseDown，onMouseUp，onMouseMve，onKeyPress，onKeyDown，onKeyUp；

与浏览器相关的事件有：onLoad，onUnload，onError，onAbort，onResize，onScroll；

与表单样式相关的事件有：onFocus，onBlur，onChange，onSelect，onSubmit，onReset。

下面来学习几种常用事件。

1. onClick

onClick事件在鼠标单击某对象时触发，这些对象可以是单选框、复选框、列表框、提交按钮、重置按钮或一般按钮、链接图片等。在例5-3.html中，已经使用过onclick事件。下面给出几个有关onClick的实例。

1)应用于按钮对象

<input type="button" value="蓝色背景"

onClick="javascript:document.bgColor =’blue’">

该代码实现的功能是：在单击按钮时，网页的背景色变为蓝色。其中bgColor是document对象的属性，对大小写敏感。

2)应用于图片对象

<img src="a.jpg" width=50 height=50 onClick="window.open('a.jpg','大图

','width=500,height=400')">

该代码实现的功能是：先显示一个50∗50大小的图片(a.jpg)，单击图片后，弹出一个新窗口显示500∗400的图片(a.jpg)。其中，open()为window对象的方法，它有3个参数：第一个参数指定在新窗口中打开的文件路径与名称；第二个参数指定新窗口的名字；第三个参数指定新窗口的大小。

3)应用于复选框对象

该代码实现的功能是：在勾选复选框时，弹出提示框“您的信息将被保存”。

4)应用于列表对象

</select>

该代码的功能是：当点击相应选项时，页面自动跳转到相应的网址去。

5)应用于文本

<font id="tex">上海世博园</font><br>

该代码的功能是：通过点击链接文字来放大或缩小目标文字“上海世博园”。

2. onChange

当对象内容发生改变时触发，这些对象可以是文本字段、密码字段、文本域、菜单等。

1)应用于文本字段

输入您的年龄：<input type="text" name="age" onChange="JavaScript: if(this.value<18)alert('您未满18岁，不能进入。'); else location.href='a.htm';">

该代码的功能是：对用户输入的年龄进行判断，并根据是否小于18岁作出相应动作。

2)应用于菜单对象

</select>

该代码的功能是：当选择菜单中的相应选项时，页面自动跳转到相应的网址。

3. onMouseMove

在鼠标移动时触发此事件。

<img src="a.jpg" width=500 height=400 onMouseMove="momove.innerHTML

=event.x+','+event.y">

该代码的功能是：当鼠标在图片上移动时，在图片上方的<span>区域会实时显示当前的鼠标位置。

4. onMouseOver和onMouseOut

当鼠标移入或移出对象时分别触发这两个事件，这些对象可以是图片、按钮、表格、文字等网页元素。这两个事件通常成对使用，实现动态效果。

图5-6　onMouseMove事件的应用

1)用于图片交换

<img src="1.gif" onMouseOver="this.src=2.gif"

onMouseOut="this.src=1.gif"/>

该代码实现的功能是：当鼠标移到图片上时，会在同一位置显示另一幅图片；当鼠标移出时，又恢复显示原图片。

2)用于放大图片

<img src="a.jpg" width="50" height="50" onMouseOver="this.width='300';

this.height='300';" onMouseOut="this.width='50';

this.height='50';"/>

该代码实现的功能是：当鼠标移到图片上时，图片自动放大显示；当鼠标移出图片时，图片又恢复原尺寸。

3)变化的表格背景

<td onMouseOver="this.bgColor='#eeee00';" onMouseOut="this.bgColor=

'#ffffff';">aabb</td>

该代码实现的功能是：表格默认的背景色是白色，当鼠标移到单元格内时，背景色变为“eeee00”；当鼠标移出时，背景色又恢复为白色。利用同样的方法，还可以显示背景图片。

<td onMouseOver="this.backgroung=’1.jpg’;" onMouseOut=

"this.background= '';">

5. onMouseDown

当鼠标按下时触发该事件，还可以根据event.button属性判断用户按下的是左键还是右键。

<img src=”1.gif” onMouseDown=”javascript:if(event.buton==2)alert('不

允许使用右键');”

6. onKeyPress

当按下键盘时触发此事件，该事件还可进一步分解为onKeyDown和onKeyUp两个事件。

<input type="text" name="tex1" onKeyDown="javascript:if(event.keyCode

=='13')pwd.focus();"/>

该代码实现的功能是：当用户在tex1文本字段中按下回车键时，光标会自动定位到pwd文本字段内。也可以将onKeyDown改为onKeyPress。

7. onload和onunload

当页面被载入或退出时，分别触发这两个事件。Onload用来完成一些系统初始化工作，如页面一启动就调用某个函数。而onunload常用来做一些收尾工作，如页面退出时更新Cookie的状态。

该代码实现的功能是：当网页打开时，弹出“欢迎光临！”对话框；当退出页面时，弹出“欢迎再来。”对话框。

8. onSubmit和onReset

这两个事件专用于表单，当单击表单中的“提交”或者“重置”按钮时，分别触发这两个事件。

<form name="form1" method="post" action="a.htm" onSubmit=

"javascript:if(tex2.value=='')alert('用户名不能为空');return false;"

onReset="javascript:if(!confirm('你确定要重置表单？'))return

false;">

用户名：<input name="tex2" id="tex2" type="text"/> <br/>

</form>

其中，confirm是window()对象的方法，它的作用是弹出一个确认对话框，有“确定”和“取消”两个按钮，如果选择“确定”则返回true，如果选择“取消”，则返回false。以上代码的功能是：当用户单击“提交”按钮时，如果用户名为空，则弹出提示信息，并且不提交表单；当单击“重置”按钮时，会弹出“确认”对话框，如果选择“取消”则不重置表单，如图5-7所示。