第五章 事件和事件处理

处理图形映射事件

图形映射是一类比较特殊的图形事件，由分布在不同区域的图形 组成，用户单击图形的某个区域，便可以连接与该区域相关的 URL。

定义函数
function messageHandle() { alert("您点击的是图形的第二个映射区！"); }

Βιβλιοθήκη Baidu调用函数
<IMG src = "example.gif" USEMAP = "#example"> <MAP NAME = "example"> <AREA COORDS = "5,5,300,120" HERF = "picture.html" TARGET = _BLANK> <AREA COORDS = "300,5,600,120" onClick = "messageHandle()" > </MAP>
JavaScript程序设计
贾素玲 王强 主编 编著 张剑 曹爽 董亮
5.1
高等学校计算机应用人才培养系列教材
第五章 事件和事件处理
5.2
高等学校计算机应用人才培养系列教材
本章结构

理解事件 处理事件


JavaScript中的事件处理
事件对象
5.3
高等学校计算机应用人才培养系列教材
理解事件

用HTML属性指定的事件处理器为：

<input type = “button” name = “infoButton” value = “click me” onClick = "alert('按钮的click事件被触发！')">

同样的功能通过JavaScript属性指定事件处理器来实现：

document.forms[0].infoButton.onclick= function() {alert('按钮的click事件被触发！');}


5.17
高等学校计算机应用人才培养系列教材
JavaScrpt中的事件处理


处理错误事件
定义函数
function errorHandler(errorMessage,url,line) { var message= "错误信息：" + errorMessage + "\n错误文档的URL：" + url + "\n错误的行号：" + line; alert(message); } onerror=errorHandler;
JavaScrpt中的事件处理

处理窗口事件

窗 口 事 件 主 要 用 来 处 理 普 通 的 HTML 文 档 以 及 包 含 帧 结 构 的 HTML文档，常用的有load、unload、blur、focus等事件。

定义函数
function loadHandle() { alert("窗口执行了load事件！"); } function unloadHandle() { alert("窗口执行了unload事件！"); }

实现错误处理功能的关键是通过下面的代码把windows的onerror属性 设置为错误事件处理器：
5.13
高等学校计算机应用人才培养系列教材
JavaScrpt中的事件处理

处理窗体事件

在JavaScript实际应用中，最常处理的事件就是窗体事件。 窗体提供了许多图形用户界面控件，帮助用户完成 Web交互，例 如：文本框、单选框、复选框、按钮等等。

定义函数
function checkValid(s) { var len = s.length; for(var i=0; i<len; i++) { if(s.charAt(i)!="") { return false; } } return true; } function okHandle() { if(checkValid(document.test.userName.value)) { alert("用户名称不能为空！"); } else if(checkValid(document.test.passWord.value)) { alert("用户密码不能为空！"); } else { alert("您填写正确！"); } }
高等学校计算机应用人才培养系列教材
5.14
JavaScrpt中的事件处理
处理窗体事件

定义函数
function cancelHandle() { document.test.userName.value=""; document.test.passWord.value=""; }

调用函数
<input type="button" name="ok" value=" 确 定 " onClick="okHandle()">
5.16
高等学校计算机应用人才培养系列教材
JavaScrpt中的事件处理

处理错误事件

JavaScript1.1及其以后版本引入了 error事件，提供了在脚本执行 过程中处理错误的功能。 图像、窗口以及框架对象有error事件，其中image对象的onError 事件处理器可以处理与加载图形相关的错误，而 windows 对象的 onError事件处理器可以处理与加载文档相关的错误。 处理错误事件不同于处理其他事件，事件处理函数不需要自己编 写，而是由浏览器自动执行，通过3个参数传递错误信息：第一个 参数描述所发生错误的信息；第二个参数是一个URL，指明引起 错误的JavaScript代码所在的文档；第三个参数是该文档中错误代 码所在行的行号。

事件概述

事件是浏览器响应用户操作的机制，说明了用户与 Web页面交互 时产生的操作。


事件可以向浏览器表明有操作发生，需要浏览器处理。
浏览器可以监听事件，在事件发生时做出反应，进行相应的处理 工作。这种监听、响应事件并进行处理的过程被称为事件处理。

有些事件可以被浏览器自动监听，由浏览器自动触发，例如：窗 体的load事件。
事件处理属性
onAbort onBlur onChange onClick
事件处理属性
onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp onMove onReset 用户移动鼠标
相应代码的执行
鼠标从客户端图片区域的链接区域移出 鼠标移到客户端图片区域的链接区域 用户释放鼠标按钮 用户按下鼠标按钮 用户移动窗口或框架 用户点击表单重置按钮，重置表单 用户调整窗口或框架大小
<input type="button" name="cancel" value=" 取 消 " onClick="cancelHandle()">
5.15
高等学校计算机应用人才培养系列教材
JavaScrpt中的事件处理

处理窗体事件

当点击“确定”按钮时，将判断是否录入用户名称和密码，如果 两者都录入内容将提示填写正确，否则提示信息缺失；点击“取 消”按钮将把用户名称文本框和用户密码文本框内容清空。
HTML组件 JavaScript事件
Click Dbclick 单行文本域 mouseDown mouseUp change select click blur 按钮 focus mouseDown mouseUp 复选框 单选按钮 focus click blur focus
HTML组件
JavaScript事件
onClick = “alert(„您点击按钮了！’)”>

除了直接使用JavaScript代码串，更好的方法是通过事件处理器调 用函数，通过函数完成事件处理。 定义函 数
<script language="JavaScript"> function printMessage(message) { alert(message); } </script>
<input type = "button" value = "通过函数输出信息按钮" onClick = "printMessage('点击按钮后先调用函数，通过函数输出信息！')">
5.8
高等学校计算机应用人才培养系列教材
调用函 数
处理事件

通过JavaScript属性处理事件

将事件处理器作为JavaScript的属性，使程序像操作 JavaScript属 性一样来处理事件。
有些事件是用来执行某段代码以响应用户请求的，由人工编写程 序进行定义的，当特定的事件发生时，执行这个事件对应的代码 ，以完成预期的事件处理。

5.4
高等学校计算机应用人才培养系列教材
理解事件

事件类型

JavaScript支持大量的事件类型，而且针对不同对象，同一操作也 会产生不同的事件结果。

部分JavaScript事件
onDbClick
onDragDrop onError
链接、客户端图片区域或文档被双击
在窗口或框架中拖拽某个对象 在图片、窗口或框架加载时出错
onFocus
onKeyDown onKeyPress onKeyUp onLoad
文档、窗口、框架或表单元素得到当前输入焦点
onResize 用户按下按钮 用户按下并释放键 用户释放键 加载图片、文档或框架

定义函数
function printMessage(message) { alert(message); } <A href = # onMouseOver = "printMessage (' 您的鼠标经过链接了！')"> 请把鼠标放过来， 看看会发生什么事情：） </A>

调用函数
5.10
高等学校计算机应用人才培养系列教材
<input type = “button” value = “click me”
onClick = “alert(„您点击按钮了！’)”>
5.6
高等学校计算机应用人才培养系列教材
理解事件

事件处理器的属性
相应代码的执行
取消图片的加载 文档、窗口、框架或表单元素失去当前输入焦点 文本框、文本域、文件上传或选项被修改或失去当 前输入焦点 链接、客户端图片区域或表单元素被点击

调用函数
<body onload = "loadHandle()" onUnload = "unloadHandle()">
5.11
高等学校计算机应用人才培养系列教材
JavaScrpt中的事件处理

处理图形事件

图形事件用于了解图形的加载状况、判断加载过程中是否发生中 断或者错误，从而构建丰富多彩的 Web 应用。下面是关于图形 load事件的例子：

事件处理器的代码包含在相应的HTML标记里面，作为该标记的 属性，其语法格式如下：

<HTML标签 事件处理器名称 = “JavaScript代码”>

事件处理器名称与事件本身的名称大体相同，只是在事件名称前 面加上了“on”，例如click事件的事件处理器为onClick。 一个完整的例子：


onSelect
onSubmit onUnload
在文本框或文本域中选择文本
提交表单 用户退出文档或框架
5.7
高等学校计算机应用人才培养系列教材
处理事件

通过HTML属性处理事件

事件处理器是作为HTML的属性值来表示和应用的，例如：

<input type = “button” value = “click me”

使用JavaScript的属性来表示事件处理器的好处：


减少了HTML和JavaScript的混合使用，简洁明了。
事件处理器的代码不必是确定的，可以根据需要动态创建和修改。
5.9
高等学校计算机应用人才培养系列教材
JavaScrpt中的事件处理

处理链接事件

与链接相关的事件一共有九个，常用的有 click事件， mouseOver 事件和mouseOut事件等等。下面是mouseOver事件举例：
blur
HTML组件
JavaScript事件
click
focus
重置
blur
链接
mouseOver mouseOut
keyDown
keyUp keyPress
click
blur focus
5.5
高等学校计算机应用人才培养系列教材
理解事件

事件处理器

当事件发生时，程序就会执行用于响应事件的JavaScript代码，响 应特定事件的代码被称为事件处理器。

定义函数
function imageLoadHandle() { alert("图形加载完成！"); }

调用函数
<IMG src = “example.gif” onLoad = “imageLoadHandle()”>
5.12
高等学校计算机应用人才培养系列教材
JavaScrpt中的事件处理