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>