第五章 事件和事件处理
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 |
选择菜单组件失去输入焦点 选择菜单组件获得输入焦点 选择菜单组件被修改并失去当前输入焦点 |
针对不同的HTML元素,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: