JavaScript 事件处理基础与常用示例

JavaScript 事件基础

事件是指能够被 JavaScript 程序侦测到的特定行为。

事件

JavaScript 赋予了开发者创建动态网页的能力，其核心机制在于事件。事件是可以被 JavaScript 侦测到的行为。

HTML 页面中的每个元素都能触发特定的事件，进而执行对应的 JavaScript 函数。例如，当用户点击按钮时，会触发 onClick 事件并调用相应函数。这些事件直接在 HTML 页面中进行定义。

常见的事件类型包括：

鼠标点击

页面或图像加载完成

鼠标悬停在页面热点区域

在表单中选择输入框

提交表单

键盘按键操作

需要注意的是，事件通常与函数配合使用，只有当事件发生时，关联的函数才会被执行。

如需了解更全面的 JavaScript 可识别事件，请参阅完整的《事件参考手册》。

页面加载与卸载事件

onload 和 onUnload

当用户进入或离开页面时，会分别触发 onload 和 onUnload 事件。

onload 事件常用于检测访问者的浏览器类型及版本，并据此加载特定版本的网页内容。

此外，onload 和 onUnload 事件也常用于处理用户进入或离开页面时创建的 cookies。例如，当用户首次访问页面时，可通过消息框询问姓名并将姓名保存至 cookie；当用户再次访问时，则通过另一个消息框显示欢迎语，如“Welcome John Doe!”。

表单焦点与变更事件

onFocus, onBlur 和 onChange

onFocus、onBlur 和 onChange 事件通常配合使用，以实现表单验证功能。

以下是一个使用 onChange 事件的示例：一旦用户修改了输入域的内容，系统便会调用 checkEmail() 函数。

表单提交验证

<input type="text" size="30" id="email" onchange="checkEmail()">onSubmit

onSubmit 事件用于在提交表单之前对所有表单域进行验证。

以下是一个使用 onSubmit 事件的示例：当用户单击表单中的确认按钮时，会调用 checkForm() 函数。如果域的值无效，提交操作将被取消。checkForm() 函数返回 true 或 false：若返回 true，则提交表单；若返回 false，则取消提交。

鼠标悬停交互效果

<form method="post" action="xxx.htm" onsubmit="return checkForm()">onMouseOver 和 onMouseOut

onMouseOver 和 onMouseOut 事件常用于创建“动态”按钮效果。

以下是一个使用 onMouseOver 事件的示例：当侦测到该事件时，将弹出一个警告框。

<a href="http://www.w3school.com.cn"

onmouseover="alert('An onMouseOver event');return false">

<img src="w3schools.gif" width="100" height="30">

</a>