第五章 事件和事件处理
5.1 理解事件
5.1.1 事件概述
浏览器响应用户操作的机制，js大部分事件都与HTML标记有关，都是在用户操作页面元素时触发的。js为绝大多数HTML对象定义了事件，包括链接(link),图像(image),表单元素(form element)和窗口(window)等。
有些事件由浏览器自动监听，如窗体load事件。有些事件响应用户请求需要人工编写程序来定义。
5.1.2 事件类型
| HTML组件 | HTML标记 | JavaScript事件 | 描述 |
| 链接 | <a></a> | click keyUp keyPress |
鼠标单击链接 用户释放键 用户按下并释放键 |
| 图像 | <img> | abort error load keyDown keyUp keyPress |
图像的加载被中止 图像的加载过程中出现错误 图像加载和显示 用户按下键 用户释放键 用户按下并释放键 |
| 区域 | <area> | mouseOver mouseOut dbClick |
鼠标停在客户端图像区域上 鼠标从图像区域内移到区域外 用户双击图像区域 |
| 文档体 | <body></body> | click dbClick keyDown keyUp keyPress mouseDown |
用户单击文档体 用户双击文档体 用户按下键 用户释放键 用户按下并释放键 用户按下鼠标按钮 |
| 窗口框架集框架 | <frameset> </frameset> <frame> </frame> |
blur error focus load unload move resize dragDrop |
窗口失去输入焦点 窗口加载时出现错误 窗口接收当前输入焦点 窗口的加载完成 用户退出窗口 移动窗口 调整窗口大小 用户将一个对象放入窗口 |
| 表单 | <form></form> | submit reset |
用户提交表单 用户重置表单 |
| 单行文本域 | <input type="text"> | blur focus change select |
文本域失去当前输入焦点 文本域得到当前输入焦点 文本域被修改并且失去当前输入焦点 在文本域中选择了文本 |
| 密码域 | <input type="password"> | blur focus |
密码域失去焦点 密码域获得焦点 |
| 多行文本域 | <textarea></textarea> | blur focus change select keyDown keyUp keyPress |
文本域失去当前输入焦点 文本域得到当前输入焦点 文本域被修改并且失去当前焦点 在文本域中选择了文本 用户按下键 用户释放键 用户按下并释放键 |
| 按钮 | <input type="button"> | click blur focus mouseDown mouseUp |
单击按钮 按钮失去输入焦点 按钮获得输入焦点 用户在按钮上按下鼠标左键 用户在按钮上释放鼠标左键 |
| 提交 | <input type="submit"> | click blur focus |
单击重置按钮 重置按钮失去焦点 重置按钮获得焦点 |
| 重置 | <input type="reset"> | click blur focus |
单击重置按钮 重置按钮失去焦点 重置按钮获得焦点 |
| 单选按钮 | <input type="radio"> | click blur focus |
单击单选按钮 单选按钮失去焦点 单选按钮获得焦点 |
| 复选框 | <input type="checkbox"> | click blur focus |
单击复选框 复选框失去焦点 复选框获得焦点 |
| 文件上传 | <input type="file"> | blur change focus |
文件上传表单组件失去焦点 用户选择一个文件上传 文件上传表单组件获得输入焦点 |
| 下拉菜单 | <select></select> | blur focus change |
选择菜单组件失去输入焦点 选择菜单组件获得输入焦点 选择菜单组件被修改并失去当前输入焦点 |
针对不同的ＨＴＭＬ元素，js支持不同的事件类型。
5.1.3 事件处理器
前面给出了 js编程中常用事件类型，当这些事件发生时，程序就会执行用于响应事件的js代码。响应特定事件的代码称为事件处理器。事件处理器的代码包含在相应的HTML标记里,作为该标记的属性，其语法格式如下：
<HTML标签 事件处理器名称=“js代码”>
事件处理器名称与事件本身名称大体相同，加个前缀on即可，事件处理器名称不区分大小写(HTML语言本身也从来不区分大小写，标签大小写都无所谓)
eg:
<input type="button" value="click me" onclick="alert("您单击了按钮!")">
事件句柄
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。
| 属性 | 当以下情况发生时，出现此事件 | FF | N | IE |
|---|---|---|---|---|
| onabort | 图像加载被中断 | 1 | 3 | 4 |
| onblur | 元素失去焦点 | 1 | 2 | 3 |
| onchange | 用户改变域的内容 | 1 | 2 | 3 |
| onclick | 鼠标点击某个对象 | 1 | 2 | 3 |
| ondblclick | 鼠标双击某个对象 | 1 | 4 | 4 |
| onerror | 当加载文档或图像时发生某个错误 | 1 | 3 | 4 |
| onfocus | 元素获得焦点 | 1 | 2 | 3 |
| onkeydown | 某个键盘的键被按下 | 1 | 4 | 3 |
| onkeypress | 某个键盘的键被按下或按住 | 1 | 4 | 3 |
| onkeyup | 某个键盘的键被松开 | 1 | 4 | 3 |
| onload | 某个页面或图像被完成加载 | 1 | 2 | 3 |
| onmousedown | 某个鼠标按键被按下 | 1 | 4 | 4 |
| onmousemove | 鼠标被移动 | 1 | 6 | 3 |
| onmouseout | 鼠标从某元素移开 | 1 | 4 | 4 |
| onmouseover | 鼠标被移到某元素之上 | 1 | 2 | 3 |
| onmouseup | 某个鼠标按键被松开 | 1 | 4 | 4 |
| onreset | 重置按钮被点击 | 1 | 3 | 4 |
| onresize | 窗口或框架被调整尺寸 | 1 | 4 | 4 |
| onselect | 文本被选定 | 1 | 2 | 3 |
| onsubmit | 提交按钮被点击 | 1 | 2 | 3 |
| onunload | 用户退出页面 | 1 | 2 | 3 |
5.2 处理事件
js中事件处理分为两个步骤：首先定义可以被js识别和处理的事件，然后由程序员使用标准的方法将事件和事件处理代码连接起来。
针对以上步骤，js有两种处理方式，分别是HTML属性的事件处理方式和js属性的事件处理方式。
5.2.1 通过HTML属性处理事件
事件处理器作为HTML的属性值来表示和应用，eg:
<input type="button" value="click me" onclick="alert('您单击按钮了！')">
上述事件处理器onclick就是用标签<input>的属性onclick指定的，HTML4.0已经为js中的事件处理器定义了相应的属性，在程序中可以通过HTML标签的属性指定相应的事件处理器，从而完成事件处理。
最好通过事件处理器调用函数完成事件处理。
eg：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML属性处理事件</title>
<script language="JavaScript">
function printMeaasge(message) {
alert(message);
}
</script>
</head>
<body>
<h3>Example:作为HTML属性的事件处理器</h3>
<input type="button" value="直接输出信息" onclick="alert('您单击了按钮，直接输出了信息！')">
<input type="button" value="通过函数输出信息按钮" onclick="printMeaasge('单击按钮后先调用函数，通过函数输出信息！')">
</body>
</html>运行结果：
5.2.2 通过js属性处理事件
事件处理器几乎都是作为HTML的属性值来定义的，通过js属性处理事件，了解一下。
作为js属性的事件处理器，这种方式允许程序像操作js属性一样来处理事件。比较区别：
HTML属性：
<input type="button" name="infobutton" value="click me" onclick="alert('按钮的click事件被触发了！')">
js属性：
document.forms[0].infoButton.onclick=function(){alert('按钮的click事件被触发了！')}
注意：HTML语言不区分字母大小写，所以作为HTML属性的事件处理器不区分大小写；而js是一种对大小写敏感的计算机语言，所以js的事件处理器属性区分大小写，他们必须使用小写字母，例如onclick、onload等。
js属性表示事件处理器不常用，但也有一些好处，如减少HTML与js代码的混合使用，js事件处理器的代码不必是确定的，动态创建修改等。
5.3 js中的事件处理
针对js编程中常用的事件类型和处理方式结合实例进行说明
5.3.1 处理链接事件
根据5.1.2中的表格可以看到与链接相关的事件一共有9个，常用的有click事件，mouseOver事件和mouseOut事件。
eg:链接的mouseover事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example: 链接的mouseover事件</title>
<script language="JavaScript">
function printMessage(message) {
alert(message)
}
</script>
</head>
<body>
<h3>Example: 链接的mouseover事件</h3>
<a href="#" onmouseover="printMessage('您的鼠标经过链接了！')">
请把鼠标放过来，看看会发生什么
</a>
</body>
</html>运行结果：
注意：双引号内在有双引号，内部要改成单引号
鼠标经过链接就触发事件，还可以给一个链接关联多个事件
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example: 链接的mouseover事件</title>
<script language="JavaScript">
function printMessage(message) {
alert(message)
}
</script>
</head>
<body>
<h3>Example: 链接的mouseover事件</h3>
<a href="#" onmouseover="printMessage('您的鼠标经过链接了！')" onmouseout="printMessage('您的鼠标刚离开了 链接!')">
请把鼠标放过来，看看会发生什么
</a>
</body>
</html>运行结果：
5.3.2 处理窗口事件
窗口事件主要用来处理普通HTML文档以及包含帧结构的HTML文档，常用的有load事件，unload事件、blur事件、focus事件等。
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example:窗口的load和unload事件</title>
<script language="JavaScript">
function loadHandle() {
alert("窗口执行了load事件!")
}
function unloadHandle() {
alert("窗口执行了unload事件!")
}
</script>
</head>
<body onload="loadHandle()" onunload="unloadHandle()">
<h3>Example:窗口的load事件和unload</h3>
</body>
</html>运行结果：
5.3.3 处理图形事件
为了美化页面常用大量图片，与图像相关的事件经常碰到
eg: