JavaScript程序设计：第五章 事件和事件处理

第五章事件和事件处理本章结构理解事件处理事件JavaScript中的事件处理事件对象理解事件事件概述事件是浏览器响应用户操作的机制，说明了用户与Web页面交互时产生的操作。事件可以向浏览器表明有操作发生，需要浏览器处理。浏览器可以监听事件，在事件发生时做出反应，进行相应的处理工作。这种监听、响应事件并进行处理的过程被称为事件处理。有些事件可以被浏览器自动监听，由浏览器自动触发，例如：窗体的load事件。有些事件是用来执行某段代码以响应用户请求的，由人工编写程序进行定义的，当特定的事件发生时，执行这个事件对应的代码，以完成预期的事件处理。理解事件事件类型JavaScript支持大量的事件类型，而且针对不同对象，同一操作也会产生不同的事件结果。HTML组件JavaScript事件链接ClickDbclickmouseDownmouseUpmouseOvermouseOutkeyDownkeyUpkeyPressHTML组件JavaScript事件单行文本域blurfocuschangeselect按钮clickblurfocusmouseDownmouseUpHTML组件JavaScript事件重置clickblurfocus单选按钮clickblurfocus复选框clickblurfocus部分JavaScript事件理解事件事件处理器当事件发生时，程序就会执行用于响应事件的JavaScript代码，响应特定事件的代码被称为事件处理器。事件处理器的代码包含在相应的HTML标记里面，作为该标记的属性，其语法格式如下：<HTML标签事件处理器名称=“JavaScript代码”>事件处理器名称与事件本身的名称大体相同，只是在事件名称前面加上了“on”，例如click事件的事件处理器为onClick。一个完整的例子：<inputtype=“button”value=“clickme”onClick=“alert(‘您点击按钮了！’)”>理解事件事件处理器的属性事件处理属性相应代码的执行onAbort取消图片的加载onBlur文档、窗口、框架或表单元素失去当前输入焦点onChange文本框、文本域、文件上传或选项被修改或失去当前输入焦点onClick链接、客户端图片区域或表单元素被点击onDbClick链接、客户端图片区域或文档被双击onDragDrop在窗口或框架中拖拽某个对象onError在图片、窗口或框架加载时出错onFocus文档、窗口、框架或表单元素得到当前输入焦点onKeyDown用户按下按钮onKeyPress用户按下并释放键onKeyUp用户释放键onLoad加载图片、文档或框架事件处理属性相应代码的执行onMouseDown用户移动鼠标onMouseMove鼠标从客户端图片区域的链接区域移出onMouseOut鼠标移到客户端图片区域的链接区域onMouseOver用户释放鼠标按钮onMouseUp用户按下鼠标按钮onMove用户移动窗口或框架onReset用户点击表单重置按钮，重置表单onResize用户调整窗口或框架大小onSelect在文本框或文本域中选择文本onSubmit提交表单onUnload用户退出文档或框架处理事件

通过HTML属性处理事件事件处理器是作为HTML的属性值来表示和应用的，例如：<inputtype=“button”value=“clickme”onClick=“alert(‘您点击按钮了！’)”>除了直接使用JavaScript代码串，更好的方法是通过事件处理器调用函数，通过函数完成事件处理。<scriptlanguage="JavaScript">functionprintMessage(message){alert(message);}</script><inputtype="button"value="通过函数输出信息按钮"onClick="printMessage('点击按钮后先调用函数，通过函数输出信息！')">定义函数调用函数处理事件通过JavaScript属性处理事件将事件处理器作为JavaScript的属性，使程序像操作JavaScript属性一样来处理事件。

用HTML属性指定的事件处理器为：<inputtype=“button”name=“infoButton”value=“clickme”onClick="alert('按钮的click事件被触发！')">同样的功能通过JavaScript属性指定事件处理器来实现：document.forms[0].infoButton.onclick=function(){alert('按钮的click事件被触发！');}使用JavaScript的属性来表示事件处理器的好处：减少了HTML和JavaScript的混合使用，简洁明了。事件处理器的代码不必是确定的，可以根据需要动态创建和修改。JavaScrpt中的事件处理处理链接事件与链接相关的事件一共有九个，常用的有click事件，mouseOver事件和mouseOut事件等等。下面是mouseOver事件举例：functionprintMessage(message){alert(message);}定义函数调用函数<Ahref=#onMouseOver="printMessage('您的鼠标经过链接了！')">请把鼠标放过来，看看会发生什么事情：）</A>同一个链接还可以注册多个事件处理器，当发生不同的事件的时候，就调用相应的事件处理器执行处理程序。例1:<scriptlanguage="javascript">functionprintmessage(message){alert(message);}</script><ahref=#onMouseOver=printmessage("您的鼠标经过了链接区")onclick=printmessage(“Warning:您用鼠标单击了链接!!!!”)>移动鼠标，看看会发生什么事情

</a>JavaScrpt中的事件处理处理窗口事件窗口事件主要用来处理普通的HTML文档以及包含帧结构的HTML文档，常用的有load、unload、blur、focus等事件。定义函数functionloadHandle(){alert("窗口执行了load事件！");}functionunloadHandle(){alert("窗口执行了unload事件！");}例2:<bodyonload="loadHandle()"onUnload="unloadHandle()">

调用函数JavaScrpt中的事件处理处理图形事件图形事件用于了解图形的加载状况、判断加载过程中是否发生中断或者错误，从而构建丰富多彩的Web应用。下面是关于图形load事件的例子：定义函数functionimageLoadHandle(){alert("图形加载完成！");}调用函数例3:<IMGsrc=“example.gif”onLoad=“imageLoadHandle()”>

JavaScrpt中的事件处理处理图形映射事件图形映射是一类比较特殊的图形事件，由分布在不同区域的图形组成，用户单击图形的某个区域，便可以连接与该区域相关的URL。定义函数调用函数functionmessageHandle(){alert("您点击的是图形的第二个映射区！");}

例4:<IMGsrc="example.gif"usemap="#example"border=0><mapname="example"><AREACOORDS="5,5,300,120"HREF="picture.html"TARGET=_BLANK><AREACOORDS="300,5,600,120"onclick="messageHandle()">JavaScrpt中的事件处理处理窗体事件在JavaScript实际应用中，最常处理的事件就是窗体事件。窗体提供了许多图形用户界面控件，帮助用户完成Web交互，例如：文本框、单选框、复选框、按钮等等。定义函数functioncheckValid(s){varlen=s.length;for(vari=0;i<len;i++){if(s.charAt(i)!=""){returnfalse;}}returntrue;}functionokHandle(){if(checkValid(document.test.userName.value)){alert("用户名称不能为空！");}elseif(checkValid(document.test.passWord.value)){alert("用户密码不能为空！");}else{alert("您填写正确！");}}JavaScrpt中的事件处理定义函数functioncancelHandle(){document.test.userName.value="";document.test.passWord.value="";}调用函数例5:<formname="test"><h1>Example:窗体事件</h1><fontsize="2">用户名称:</font><inputtype="text"name="userName"><br><br><fontsize="2">用户密码:</font><inputtype="text"name="passWord"><br><br><inputtype="button"name="ok"value="确定"onclick="okHandle()"/>       <inputtype="button"name="cancel"value="取消"onClick=cancelHandle()>处理窗体事件JavaScrpt中的事件处理处理窗体事件当点击“确定”按钮时，将判断是否录入用户名称和密码，如果两者都录入内容将提示填写正确，否则提示信息缺失；点击“取消”按钮将把用户名称文本框和用户密码文本框内容清空。JavaScrpt中的事件处理处理错误事件JavaScript1.1及其以后版本引入了error事件，提供了在脚本执行过程中处理错误的功能。图像、窗口以及框架对象有error事件，其中image对象的onError事件处理器可以处理与加载图形相关的错误，而windows对象的onError事件处理器可以处理与加载文档相关的错误。处理错误事件不同于处理其他事件，事件处理函数不需要自己编写，而是由浏览器自动执行，通过3个参数传递错误信息：第一个参数描述所发生错误的信息；第二个参数是一个URL，指明引起错误的JavaScript代码所在的文档；第三个参数是该文档中错误代码所在行的行号。JavaScrpt中的事件处理处理错误事件定义函数functionerrorHandler(errorMessage,url,line){varmessage="错误信息："+errorMessage+"\n错误文档的URL："+url+"\n错误的行号："+line;alert(message);}onerror=errorHandler;实现错误处理功能的关键是通过下面的代码把windows的onerror属性设置为错误事件处理器：onerror=errorHandler;JavaScrpt中的事件处理处理错误事件如果将错误事件处理函数的名称赋给了windows对象的onerror属性，那么发生的错误将会被处理。例如点击按钮时调用不存在的函数okHandle()：<inputtype="button"onClick="okHandle()"value="确定">事件对象JavaScript1.2引入了event对象作为提供事件细节信息的机制，由于event对象包含了若干存储事件细节信息的属性，所以可以通过访问event对象的属性来获取所发生事件的详细信息。Netscape公司和微软公司在其浏览器软件中都定义了event对象，但是在两家公司浏览器软件Navigator和InternetExplorer中，event对象的属性几乎完全不同。在上面两种浏览器中，除了event对象的属性不同以外，事件处理器使用event对象的方法也存在很大差异：InternetExplorer将event对象定义为全局性的，可以从事件处理器中直接访问。P101表5-3InternetExplorer中的Event对象属性Navigator浏览器将event对象作为参数传递给事件处理器。functionshowLocation(){alert("光标的水平位置:"+event.screenX+"光标的垂