JavaScript-5

1、软件职业技术学院5.1JavaScriptJavaScript程序设计程序设计软件职业技术学院5.2第五章第五章 事件和事件处理事件和事件处理软件职业技术学院5.3本章结构本章结构u理解事件理解事件u处理事件处理事件uJavaScript中的事件处理中的事件处理u事件对象事件对象软件职业技术学院5.4理解事件理解事件u事件概述事件概述n事件是浏览器响应用户操作的机制，说明了用户与事件是浏览器响应用户操作的机制，说明了用户与Web页面交互页面交互时产生的操作。时产生的操作。n事件可以向浏览器表明有操作发生，需要浏览器处理。事件可以向浏览器表明有操作发生，需要浏览器处理。n浏览器可以监听事件，在事

2、件发生时做出反应，进行相应的处理浏览器可以监听事件，在事件发生时做出反应，进行相应的处理工作。这种监听、响应事件并进行处理的过程被称为事件处理。工作。这种监听、响应事件并进行处理的过程被称为事件处理。n有些事件可以被浏览器自动监听，由浏览器自动触发，例如：窗有些事件可以被浏览器自动监听，由浏览器自动触发，例如：窗体的体的load事件。事件。n有些事件是用来执行某段代码以响应用户请求的，由人工编写程有些事件是用来执行某段代码以响应用户请求的，由人工编写程序进行定义的，当特定的事件发生时，执行这个事件对应的代码序进行定义的，当特定的事件发生时，执行这个事件对应的代码，以完成预期的事件处理。，以完成

3、预期的事件处理。软件职业技术学院5.5理解事件理解事件u事件类型事件类型nJavaScript支持大量的事件类型，而且针对不同对象，同一操作也支持大量的事件类型，而且针对不同对象，同一操作也会产生不同的事件结果。会产生不同的事件结果。HTML组件JavaScript事件链接ClickDbclickmouseDownmouseUpmouseOvermouseOutkeyDownkeyUpkeyPressHTML组件JavaScript事件单行文本域blurfocuschangeselect按钮clickblurfocusmouseDownmouseUpHTML组件JavaScript事件重置cl

4、ickblurfocus单选按钮clickblurfocus复选框clickblurfocusu部分部分JavaScript事件事件软件职业技术学院5.6理解事件理解事件u事件处理器事件处理器n当事件发生时，程序就会执行用于响应事件的当事件发生时，程序就会执行用于响应事件的JavaScript代码，响代码，响应特定事件的代码被称为事件处理器。应特定事件的代码被称为事件处理器。n事件处理器的代码包含在相应的事件处理器的代码包含在相应的HTML标记里面，作为该标记的标记里面，作为该标记的属性，其语法格式如下：属性，其语法格式如下：n事件处理器名称与事件本身的名称大体相同，只是在事件名称前事件处理器

5、名称与事件本身的名称大体相同，只是在事件名称前面加上了面加上了“on”，例如，例如click事件的事件处理器为事件的事件处理器为onClick。n一个完整的例子：一个完整的例子：软件职业技术学院5.7理解事件理解事件u事件处理器的属性事件处理器的属性事件处理属性事件处理属性相应代码的执行相应代码的执行onAbort取消图片的加载onBlur文档、窗口、框架或表单元素失去当前输入焦点onChange文本框、文本域、文件上传或选项被修改或失去当前输入焦点onClick链接、客户端图片区域或表单元素被点击onDbClick链接、客户端图片区域或文档被双击onDragDrop在窗口或框架中拖拽某个对象

6、onError在图片、窗口或框架加载时出错onFocus文档、窗口、框架或表单元素得到当前输入焦点onKeyDown用户按下按钮onKeyPress用户按下并释放键onKeyUp用户释放键onLoad加载图片、文档或框架事件处理属性事件处理属性相应代码的执行相应代码的执行onMouseDown用户移动鼠标onMouseMove鼠标从客户端图片区域的链接区域移出onMouseOut鼠标移到客户端图片区域的链接区域onMouseOver用户释放鼠标按钮onMouseUp用户按下鼠标按钮onMove用户移动窗口或框架onReset用户点击表单重置按钮，重置表单onResize用户调整窗口或框架大小o

7、nSelect在文本框或文本域中选择文本onSubmit提交表单onUnload用户退出文档或框架软件职业技术学院5.8处理事件处理事件u 通过通过HTML属性处理事件属性处理事件n事件处理器是作为事件处理器是作为HTML的属性值来表示和应用的，例如：的属性值来表示和应用的，例如： n除了直接使用除了直接使用JavaScript代码串，更好的方法是通过事件处理器调代码串，更好的方法是通过事件处理器调用函数，通过函数完成事件处理。用函数，通过函数完成事件处理。 function printMessage(message) alert(message); 定义函定义函数数调用函调用函数数软件职业技

8、术学院5.9处理事件处理事件u通过通过JavaScript属性处理事件属性处理事件n将事件处理器作为将事件处理器作为JavaScript的属性，使程序像操作的属性，使程序像操作JavaScript属属性一样来处理事件。性一样来处理事件。 n用用HTML属性指定的事件处理器为：属性指定的事件处理器为：n同样的功能通过同样的功能通过JavaScript属性指定事件处理器来实现：属性指定事件处理器来实现：Button.onclick= function() alert(按钮的click事件被触发！);n使用使用JavaScript的属性来表示事件处理器的好处：

9、的属性来表示事件处理器的好处：减少了减少了HTML和和JavaScript的混合使用，简洁明了。的混合使用，简洁明了。事件处理器的代码不必是确定的，可以根据需要动态创建和修改。事件处理器的代码不必是确定的，可以根据需要动态创建和修改。软件职业技术学院5.10JavaScrpt中的事件处理中的事件处理u处理链接事件处理链接事件n与链接相关的事件一共有九个，常用的有与链接相关的事件一共有九个，常用的有click事件，事件，mouseOver事件和事件和mouseOut事件等等。下面是事件等等。下面是mouseOver事件举例：事件举例：function printMessage(message)

10、alert(message);u定义函数定义函数u调用函数调用函数 请把鼠标放过来， 看看会发生什么事情：） 软件职业技术学院5.11JavaScrpt中的事件处理中的事件处理u处理窗口事件处理窗口事件n窗口事件主要用来处理普通的窗口事件主要用来处理普通的HTML文档以及包含帧结构的文档以及包含帧结构的HTML文档，常用的有文档，常用的有load、unload、blur、focus等事件。等事件。u定义函数定义函数function loadHandle() alert(窗口执行了load事件！);function unloadHandle() alert(窗口执行了unload事件！); u调

11、用函数调用函数软件职业技术学院5.12JavaScrpt中的事件处理中的事件处理u处理图形事件处理图形事件n图形事件用于了解图形的加载状况、判断加载过程中是否发生中图形事件用于了解图形的加载状况、判断加载过程中是否发生中断或者错误，从而构建丰富多彩的断或者错误，从而构建丰富多彩的Web应用。下面是关于图形应用。下面是关于图形load事件的例子：事件的例子： u定义函数定义函数function imageLoadHandle() alert(图形加载完成！); u调用函数调用函数 软件职业技术学院5.13JavaScrpt中的事件处理中的事件处理u处理图形映射事件处理图形映射事件n图形映射是一类

12、比较特殊的图形事件，由分布在不同区域的图形图形映射是一类比较特殊的图形事件，由分布在不同区域的图形组成，用户单击图形的某个区域，便可以连接与该区域相关的组成，用户单击图形的某个区域，便可以连接与该区域相关的URL。u定义函数定义函数u调用函数调用函数function messageHandle() alert(您点击的是图形的第二个映射区！); 软件职业技术学院5.14JavaScrpt中的事件处理中的事件处理u处理窗体事件处理窗体事件n在在JavaScript实际应用中，最常处理的事件就是窗体事件。实际应用中，最常处理的事件就是窗体事件。n窗体提供了许多图形用户界面控件，帮助用户完成窗体提供

13、了许多图形用户界面控件，帮助用户完成Web交互，例交互，例如：文本框、单选框、复选框、按钮等等。如：文本框、单选框、复选框、按钮等等。u定义函数定义函数function checkValid(s) var len = s.length; for(var i=0; ilen; i+) if(s.charAt(i)!=) return false; return true;function okHandle() if(checkValid(document.test.userName.value) alert(用户名称不能为空！); else if(checkValid(document.test

14、.passWord.value) alert(用户密码不能为空！); else alert(您填写正确！); 软件职业技术学院5.15JavaScrpt中的事件处理中的事件处理u定义函数定义函数function cancelHandle() document.test.userName.value=; document.test.passWord.value=; u调用函数调用函数 u处理窗体事件处理窗体事件软件职业技术学院5.16JavaScrpt中的事件处理中的事件处理u处理窗体事件处理窗体事件n当点击当点击“确定确定”按钮时，将判断是否录入用户名称和密码，如果按钮时，将判断是否录入用户名

15、称和密码，如果两者都录入内容将提示填写正确，否则提示信息缺失；点击两者都录入内容将提示填写正确，否则提示信息缺失；点击“取取消消”按钮将把用户名称文本框和用户密码文本框内容清空。按钮将把用户名称文本框和用户密码文本框内容清空。软件职业技术学院5.17JavaScrpt中的事件处理中的事件处理u处理错误事件处理错误事件nJavaScript1.1及其以后版本引入了及其以后版本引入了error事件，提供了在脚本执行事件，提供了在脚本执行过程中处理错误的功能。过程中处理错误的功能。n图像、窗口以及框架对象有图像、窗口以及框架对象有error事件，其中事件，其中image对象的对象的onError事件

16、处理器可以处理与加载图形相关的错误，而事件处理器可以处理与加载图形相关的错误，而windows对象的对象的onError事件处理器可以处理与加载文档相关的错误。事件处理器可以处理与加载文档相关的错误。n处理错误事件不同于处理其他事件，事件处理函数不需要自己编处理错误事件不同于处理其他事件，事件处理函数不需要自己编写，而是由浏览器自动执行，通过写，而是由浏览器自动执行，通过3个参数传递错误信息：第一个个参数传递错误信息：第一个参数描述所发生错误的信息；第二个参数是一个参数描述所发生错误的信息；第二个参数是一个URL，指明引起，指明引起错误的错误的JavaScript代码所在的文档；第三个参数是该

17、文档中错误代代码所在的文档；第三个参数是该文档中错误代码所在行的行号。码所在行的行号。软件职业技术学院5.18JavaScrpt中的事件处理中的事件处理u处理错误事件处理错误事件u定义函数定义函数function errorHandler(errorMessage,url,line) var message= 错误信息： + errorMessage + n错误文档的URL： + url + n错误的行号： + line; alert(message);onerror=errorHandler; u实现错误处理功能的关键是通过下面的代码把实现错误处理功能的关键是通过下面的代码把windows的

18、的onerror属性属性设置为错误事件处理器：设置为错误事件处理器：nonerror=errorHandler;软件职业技术学院5.19JavaScrpt中的事件处理中的事件处理u处理错误事件处理错误事件n如果将错误事件处理函数的名称赋给了如果将错误事件处理函数的名称赋给了windows对象的对象的onerror属属性，那么发生的错误将会被处理。例如点击按钮时调用不存在的性，那么发生的错误将会被处理。例如点击按钮时调用不存在的函数函数okHandle()： 软件职业技术学院5.20事件对象事件对象uJavaScript1.2引入了引入了event对象作为提供事件细节信息的机对象作为提供事件细节

19、信息的机制，由于制，由于event对象包含了若干存储着事件细节信息的属对象包含了若干存储着事件细节信息的属性，所以可以通过访问性，所以可以通过访问event对象的属性来获取所发生事对象的属性来获取所发生事件的详细信息。件的详细信息。uNetscape公司和微软公司在其浏览器软件中都定义了公司和微软公司在其浏览器软件中都定义了event对象，但是在两家公司浏览器软件对象，但是在两家公司浏览器软件Navigator和和Internet Explorer中，中，event对象的属性几乎完全不同。对象的属性几乎完全不同。u在上面两种浏览器中，除了在上面两种浏览器中，除了event对象的属性不同以外，对

20、象的属性不同以外，事件处理器使用事件处理器使用event对象的方法也存在很大差异：对象的方法也存在很大差异：nInternet Explorer将将event对象定义为全局性的，可以从事件处理对象定义为全局性的，可以从事件处理器中直接访问。器中直接访问。nNavigator浏览器将浏览器将event对象作为参数传递给事件处理器。对象作为参数传递给事件处理器。软件职业技术学院5.21本章小结本章小结u事件是浏览器响应用户操作的机制，说明了用户与事件是浏览器响应用户操作的机制，说明了用户与Web页面交互时产页面交互时产生的操作。生的操作。uJavaScript中的事件大都与中的事件大都与HTML标记相关，都是在用户操作页面元标记相关，都是在用户操作页面元素是触发的。素是触发的。uJavaScript支持大量的事件类型，而且针对不同对象，同一操作也会支持大量的事件类型，而且针对不同对象，同一操作也会产生不同的事件结果。产生不同的事件结果。u当当JavaScript中定