高等学校计算机应用人才培养系列教材
5.14
JavaScrpt中的事件处理
处理窗体事件
定义函数
function cancelHandle() { erName.value=""; document.test.passWord.value=""; }
调用函数
<input type="button" name="ok" value=" 确 定 " onClick="okHandle()">
事件处理属性
onAbort onBlur onChange onClick
事件处理属性
onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp onMove onReset 用户移动鼠标
相应代码的执行
鼠标从客户端图片区域的链接区域移出 鼠标移到客户端图片区域的链接区域 用户释放鼠标按钮 用户按下鼠标按钮 用户移动窗口或框架 用户点击表单重置按钮，重置表单 用户调整窗口或框架大小
使用JavaScript的属性来表示事件处理器的好处：
减少了HTML和JavaScript的混合使用，简洁明了。
事件处理器的代码不必是确定的，可以根据需要动态创建和修改。
5.9
高等学校计算机应用人才培养系列教材
JavaScrpt中的事件处理
处理链接事件
与链接相关的事件一共有九个，常用的有 click事件， mouseOver 事件和mouseOut事件等等。下面是mouseOver事件举例：
HTML组件 JavaScript事件
Click Dbclick 单行文本域 mouseDown mouseUp change select click blur 按钮 focus mouseDown mouseUp 复选框 单选按钮 focus click blur focus
HTML组件
JavaScript事件
调用函数
<body onload = "loadHandle()" onUnload = "unloadHandle()">
5.11
高等学校计算机应用人才培养系列教材
JavaScrpt中的事件处理
处理图形事件
图形事件用于了解图形的加载状况、判断加载过程中是否发生中 断或者错误，从而构建丰富多彩的 Web 应用。下面是关于图形 load事件的例子：
用HTML属性指定的事件处理器为：
<input type = “button” name = “infoButton” value = “click me” onClick = "alert('按钮的click事件被触发！')">
同样的功能通过JavaScript属性指定事件处理器来实现：
document.forms[0].infoButton.onclick= function() {alert('按钮的click事件被触发！');}
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(erName.value)) { alert("用户名称不能为空！"); } else if(checkValid(document.test.passWord.value)) { alert("用户密码不能为空！"); } else { alert("您填写正确！"); } }
onClick = “alert(„您点击按钮了！’)”>
除了直接使用JavaScript代码串，更好的方法是通过事件处理器调 用函数，通过函数完成事件处理。 定义函 数
<script language="JavaScript"> function printMessage(message) { alert(message); } </script>
实现错误处理功能的关键是通过下面的代码把windows的onerror属性 设置为错误事件处理器：
5.16
高等学校计算机应用人才培养系列教材
JavaScrpt中的事件处理
处理错误事件
JavaScript1.1及其以后版本引入了 error事件，提供了在脚本执行 过程中处理错误的功能。 图像、窗口以及框架对象有error事件，其中image对象的onError 事件处理器可以处理与加载图形相关的错误，而 windows 对象的 onError事件处理器可以处理与加载文档相关的错误。 处理错误事件不同于处理其他事件，事件处理函数不需要自己编 写，而是由浏览器自动执行，通过3个参数传递错误信息：第一个 参数描述所发生错误的信息；第二个参数是一个URL，指明引起 错误的JavaScript代码所在的文档；第三个参数是该文档中错误代 码所在行的行号。
onDbClick
onDragDrop onError
链接、客户端图片区域或文档被双击
在窗口或框架中拖拽某个对象 在图片、窗口或框架加载时出错
onFocus
onKeyDown onKeyPress onKeyUp onLoad
文档、窗口、框架或表单元素得到当前输入焦点
onResize 用户按下按钮 用户按下并释放键 用户释放键 加载图片、文档或框架
blur
HTML组件
JavaScript事件
click
focus
重置
blur
链接
mouseOver mouseOut
keyDown
keyUp keyPress
click
blur focus
5.5
高等学校计算机应用人才培养系列教材
理解事件
事件处理器
当事件发生时，程序就会执行用于响应事件的JavaScript代码，响 应特定事件的代码被称为事件处理器。
<input type="button" name="cancel" value=" 取 消 " onClick="cancelHandle()">
5.15
高等学校计算机应用人才培养系列教材
JavaScrpt中的事件处理
处理窗体事件
当点击“确定”按钮时，将判断是否录入用户名称和密码，如果 两者都录入内容将提示填写正确，否则提示信息缺失；点击“取 消”按钮将把用户名称文本框和用户密码文本框内容清空。
有些事件是用来执行某段代码以响应用户请求的，由人工编写程 序进行定义的，当特定的事件发生时，执行这个事件对应的代码 ，以完成预期的事件处理。
5.4
高等学校计算机应用人才培养系列教材
理解事件
事件类型
JavaScript支持大量的事件类型，而且针对不同对象，同一操作也 会产生不同的事件结果。
部分JavaScript事件
<input type = “button” value = “click me”
onClick = “alert(„您点击按钮了！’)”>
5.6
高等学校计算机应用人才培养系列教材
理解事件
事件处理器的属性
相应代码的执行
取消图片的加载 文档、窗口、框架或表单元素失去当前输入焦点 文本框、文本域、文件上传或选项被修改或失去当 前输入焦点 链接、客户端图片区域或表单元素被点击
onSelect
onSubmit onUnload
在文本框或文本域中选择文本
提交表单 用户退出文档或框架
5.7
高等学校计算机应用人才培养系列教材
处理事件
通过HTML属性处理事件
事件处理器是作为HTML的属性值来表示和应用的，例如：
<input type = “button” value = “click me”
定义函数
function imageLoadHandle() { alert("图形加载完成！"); }
调用函数
<IMG src = “example.gif” onLoad = “imageLoadHandle()”>
5.12
高等学校计算机应用人才培养系列教材
JavaScrpt中的事件处理
5.17
高等学校计算机应用人才培养系列教材
JavaScrpt中的事件处理
处理错误事件
定义函数
function errorHandler(errorMessage,url,line) { var message= "错误信息：" + errorMessage + "\n错误文档的URL：" + url + "\n错误的行号：" + line; alert(message); } onerror=errorHandler;
