JavaScript 事件

• 目录
  
  1. 什么是事件
  2. 事件的作用
  3. 事件举例
  4. 事件分类列表
  5. 常用事件详解
  6. JavaScript 事件参考手册

1. 什么是事件

事件是可以被 JavaScript 侦测到的行为。

2. 事件的作用

• JavaScript 使我们有能力创建动态页面。
• 事件是可以被 JavaScript 侦测到的行为。
• 网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。
• 比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

3. 事件举例

• 鼠标点击
• 页面或图像载入
• 鼠标悬浮于页面的某个热点之上
• 在表单中选取输入框
• 确认表单
• 键盘按键

注意： 事件通常与函数配合使用，当事件发生时函数才会执行。

4. 事件分类列表

FF: Firefox, N: Netscape, IE: Internet Explorer

• 4.1 鼠标事件

序号	属性	当以下情况发生时，出现此事件	FF	N	IE
1	onclick	鼠标点击某个对象	1	2	3
2	ondblclick	鼠标双击某个对象	1	4	4
3	onmousemove	鼠标被移动	1	6	3
4	onmouseout	鼠标从某元素移开	1	4	4
5	onmouseover	鼠标被移到某元素之上	1	2	3
6	onmousedown	某个鼠标按键被按下	1	4	4
7	onmouseup	某个鼠标按键被松开	1	4	4

• 4.2 键盘事件

序号	属性	当以下情况发生时，出现此事件	FF	N	IE
1	onkeydown	某个键盘的键被按下	1	4	3
2	onkeypress	某个键盘的键被按下或按住	1	4	3
3	onkeyup	某个键盘的键被松开	1	4	3

• 4.3 页面和图像事件

序号	属性	当以下情况发生时，出现此事件	FF	N	IE
1	onload	某个页面或图像被完成加载	1	2	3
2	onunload	用户退出页面	1	2	3
3	onabort	图像加载被中断	1	3	4
4	onerror	当加载文档或图像时发生某个错误	1	3	4

• 4.4 焦点和改变事件

序号	属性	当以下情况发生时，出现此事件	FF	N	IE
1	onfocus	元素获得焦点	1	2	3
2	onblur	元素失去焦点	1	2	3
3	onchange	用户改变域的内容	1	2	3
4	onselect	文本被选定	1	2	3
6	onpropertychange	当属性发生改变

注意： onpropertychange无论粘贴 keyup onchange等都会触发事件，最为敏感

• 4.5 其他事件

序号	属性	当以下情况发生时，出现此事件	FF	N	IE
1	onsubmit	提交按钮被点击	1	2	3
2	onreset	重置按钮被点击	1	3	4
3	onresize	窗口或框架被调整尺寸	1	4	4

5. 常用事件详解

5.1 onload 和 onUnload

• 当用户进入或离开页面时就会触发 onload 和 onUnload 事件。
• onload 事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。
• onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。

5.2 onSubmit

• onSubmit 用于在提交表单之前验证所有的表单域。

下面是一个使用 onSubmit 事件的例子。当用户单击表单中的确认按钮时，checkForm() 函数就会被调用。假若域的值无效，此次提交就会被取消。checkForm() 函数的返回值是 true 或者 false。如果返回值为true，则提交表单，反之取消提交。

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

5.3 onMouseOver 和 onMouseOut

• onMouseOver 和 onMouseOut 用来创建“动态的”按钮。

下面是一个使用 onMouseOver 事件的例子。当 onMouseOver 事件被脚本侦
测到时，就会弹出一个警告框：

<a href="http://www.w3school.com.cn" onmouseover="alert('An onMouseOver event');return false">
    <img src="w3school.gif" width="100" height="30">
</a>