第10章 JavaScript中的事件处理

第10章 JavaScript中的事件处理

JavaScript中的事件是浏览器响应用户操作的机制，其事件处理功能可以改变浏览器响应某些操作的标准方式，这样可开发出更具交互性、响应性和易用性的Web页面。本章将介绍JavaScript中的事件处理。其主要内容包括：事件处理的概念，常用的事件及处理、常用的简单消息输出函数以及错误处理等。

10.1 事件处理的基本概念

事件是浏览器响应用户交互操作的一种机制。浏览器本身有一套已经设计好的响应各种事件的方法，但用户有时需要开发应用程序，希望有一套机制可按需处理各种用户事件，这样就需要用到JavaScript 的事件处理机制。JavaScript的事件处理机制可以改变浏览器响应用户操作的方法，这样就可开发出更具交互性的Web页面。

10.1.1 基本概念

在JavaScript中，事件定义了用户与Web页面交互时的各种操作。通常鼠标或键盘的动作就可称之为事件，而由鼠标或键盘引发的一连串程序的动作，称之为事件驱动。对事件进行处理的程序或函数，称之为事件处理程序。

在JavaScript中对事件的处理通常由函数担任。其基本格式与函数全部一样。事件处理程序的格式一般如下所示：

Function 事件处理名（参数表）{

事件处理语句集；

……

}

利用JavaScript可以在用户端实现完整的数据处理和验证工作，这样可以节省网络的传输开销。利用JavaScript实现交互功能的Web网页拥有以下3部分的内容。

（1）在head部分定义JavaScript函数，其中一些是事件处理函数，另外一些可能是为配合事件处理函数而编写的普通函数。

（2）HTML本身的各种格式控制标记。

（3）拥有句柄属性的HTML标记。

注意：句柄是界面对象的一个属性，可以存储特定事件处理函数的信息。当事件发生时，JavaScript 自动查找界面对象中相应的事件句柄，调用注册在上面的事件处理函数。

一般句柄的形式总是在事件名称前加on，一个事件句柄不但可在HTML语言中注册，也可以使用JavaScript语句注册在一个界面对象上。

注意：事件句柄可以发生实际的用户事件时由浏览器调用，也可以在JavaScript中显式地调用。

·217·10.1.2 处理事件的程序

在使用JavaScript语言开发事件处理程序时，必须使用的事件有以下3类：

（1）自己引起的事件，如网页加载，提交表单等。

（2）引起页面之间跳转的事件，如超链接等。

（3）表单内部与界面对象的交互，包括界面对象的改变等。

一般情况下，指定事件处理程序有3种方法：

（1）直接在HTML标记中指定。方法是：

<标记事件=”事件处理程序”[事件=”事件处理程序”……]>

使用示例：

（2）编写特定对象特定事件的JavaScript。方法是：

使用示例：

（3）在JavaScript中说明。方法是：

<对象>.<事件>=<事件处理程序>;

注意：事件处理程序如果是一个自定义函数，如不需要使用参数就不要加()。

使用示例：

function error(){

return true;

}

window.onerror=error; //不需要使用()

10.2 常用的事件及处理

JavaScript中有一些常用的事件，本节将详细讲解鼠标事件、键盘事件、窗口事件、图形事件以及浏览器事件等。

10.2.1 鼠标事件

常用的鼠标事件有MouseDown、MouseMove、MouseUp，MouseOver、MouseOut、Click、Blur及Focus等事件。

1．MouseDown

MouseDown事件是当按下鼠标的某个键时才发生的。发生MouseDown事件后，JavaScript将自动调用onMouseDown句柄。当MouseDown事件处理函数返回false值时，与鼠标操作有关的其他操作都会无效。这些操作首先必须产生MouseDown事件。

2．MouseMove事件

·218·

MouseMove事件是在鼠标移动时发生的。该事件发生后，JavaScript自动调用onMouseMove句柄。只有当一个浏览器window对象或document对象要求捕获事件时，才在每次鼠标移动时产生。

3．MouseUp事件

MouseUp事件是在释放鼠标上一个键时才发生。该事件发生后，JavaScript自动调用onMouseUp句柄。该事件可适用于普通按钮、网页及超链接等。如果MouseUp事件处理函数返回false值，与鼠标操作相关的其他操作等都无效，这是由于这些操作首先必须产生MouseUp事件。

4．MouseOver事件

MouseOver事件时在鼠标扫过一个界面对象时发生的。当MouseOver事件发生后，JavaScript自动调用执行onMouseOver句柄。

5．MouseOut事件

MouseOut事件时在鼠标脱离一个界面对象时发生的。该事件发生后，JavaScript自动调用onMouseOut句柄。一般情况下，该事件适用于区域、层及超链接对象。

6．Click事件

一般情况下，Click事件可在两个地方发生。首先，在一个表单上的某个对象被单击时发生；其次，在单击一个超链接时发生。Click事件发生后，JavaScript将自动调用onClicek事件句柄。onClick事件句柄适用于普通按钮、提交按钮、单选按钮、复选框及超链接等。

7．Blur事件

该事件是在表单其他区域单击鼠标时发生。即使当前对象的值没有改变，仍会触发onBlur事件。Click事件发生后，JavaScript将自动调用执行onBlur事件句柄。

8．Focus事件

Focus事件是在一个选择框、文本框或文本输入区域得到焦点时发生的。当Click事件发生时，JavaScript自动调用onFocus事件句柄来执行。用户可通过键盘上的Tab键或通过单击对象来得到焦点。

注意：onFocus句柄和onBlur句柄功能相反。

【示例10-1】鼠标事件

10.2.2 键盘事件

常用的键盘事件有KeyDown事件、KeyPress事件、KeyUp事件、Change事件、Select事件、Move 事件、Resize事件等。

1．KeyDown事件

KeyDown事件是在键盘上按下一个键时发生的。该事件发生后，JavaScript自动调用onKeyDown 句柄。onKeyDown句柄适用于浏览器对象document、图像、超链接及文本区域等。

2．KeyPress事件

KeyPress事件是在键盘上按下一个键时发生的。该事件发生后，JavaScript自动调用onKeyPress句柄。onKeyPress句柄适用于浏览器对象document、图像、超链接及文本区域等。

3．KeyUp事件

KeyUp事件是在键盘上按下一个键时发生的。该事件发生后，JavaScript自动调用onKeyUp句柄。onKeyUp句柄使用于浏览器对象document、图像、超链接及文本区域等。

4．Change事件

Change事件是在选择框、文本输入框或文本输入区域失去焦点，其中值又发生改变时发生的。Change