第 5 章事件和事件处理

第5章事件和事件处理 • 理解事件 • 处理事件 • Javascript中的事件处理 • 事件对象

5.1 理解事件 • 事件是浏览器响应用户操作的机制，说明用户与web页面交互时产生的操作。 • 事件可以向浏览器表明有操作发生，需浏览器处理；浏览器可以监听事件，在事件发生时做出反应并做相应的处理工作。这种监听、响应事件并进行处理的过程称为事件处理。

5.1 理解事件 • 常用事件： • Web页面加载html文档（load事件） • 单击按钮（click） • 单击链接 • 用户提交窗体 • 文本字段获得或者失去焦点（focus,blur）

5.1.1 事件类型 • JavaScript事件可以被归入几种不同的类别。最常用的类别可能是鼠标交互事件，然后是键盘和表单事件。下面提供了web应用程序中存在并可被处理的不同各类的事件的粗略预览。　　

5.1.1 事件类型 • 鼠标事件:分为两种，追踪鼠标当前位置的事件(mouseover,mouseout)，和追踪鼠标在哪儿被点击的事件(mouseup,mousedown,click)。 • 键盘事件:负责追踪键盘的按键何时以及在何种上下文中(比如说，追踪一个form元素内的按键相对于出现在整个页面的按键)被按下。与鼠标相似，三个事件用来追踪键盘：keyup,keydown,keypress。

5.1.1 事件类型 • UI事件:用来追踪用户何时从页面的一部分转到另一部分。例如，使用它你能够可靠地知道用户何时开始在一个表单中输入。用来追踪这一点的两个事件是focus和blur(用于对象失去焦点时)。 • 表单事件:直接与只发生于表单和表单输入元素上的交互相关。submit事件用来追踪表单何时提交；change事件监视用户向元素的输入；select事件当<select>元素被更新时触发。

5.1.1 事件类型 • 加载和错误事件:事件的最后一类是与页面本身有关的，关注页面的加载状态。它们被关联到何时用户第一次加载页面(load事件)和最终离开页面(unload和beforeunload事件)。另外，JavaScript错误使用error事件追踪，这给了你以独立处理错误的能力。

5.1.2 事件处理器 • 当事件发生时，程序就会执行用于响应事件的javascript代码。响应特定事件的代码称为事件处理器。事件处理器的代码包含在相应的html标记里并作为该标记的属性，语法格式如下： <html标签事件处理器名称=“javascript代码”> 事件处理器=on+对应的事件名称（首字母大写）如：<input type=“button” value=“click me” onClick=“alert(‘您单击按钮了！’)”>

5.1.2 事件处理器 • 所有事件的事件处理器列表 • 一般事件:onClick : 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击onDbClick : 鼠标双击事件onMouseDown : 鼠标上的按钮被按下了 onMouseUp : 鼠标按下后，松开时激发的事件 onMouseOver : 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove : 鼠标移动时触发的事件 onMouseOut : 当鼠标离开某对象范围时触发的事件 onKeyPress : 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象] onKeyDown : 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象] onKeyUp: 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]

5.1.2 事件处理器 • 页面相关事件: onAbort : 图片在下载时被用户中断 onBeforeUnload : 当前页面的内容将要被改变时触发的事件 onError : 捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误 onLoad : 页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成 onMove : 浏览器的窗口被移动时触发的事件 onResize : 当浏览器的窗口大小被改变时触发的事件 onScroll : 浏览器的滚动条位置发生变化时触发的事件 onStop : 浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断 onUnload : 当前页面将被改变时触发的事件

5.1.2 事件处理器 • 表单相关事件: onBlur: 当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可] onChange : 当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可] onFocus : 当某个元素获得焦点时触发的事件 onReset : 当表单中RESET的属性被激发时触发的事件 onSubmit : 一个表单被递交时触发的事件 • 滚动字幕事件:onBounce : 在Marquee内的内容移动至Marquee显示范围之外时触发的事件onFinish : 当Marquee元素完成需要显示的内容后触发的事件 onStart : 当Marquee元素开始显示内容时触发的事件

5.1.2 事件处理器 • 编辑事件:onBeforeCopy:当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件 onBeforeCut : 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件 onBeforeEditFocus: 当前元素将要进入编辑状态 onBeforePaste: 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件 onBeforeUpdate: 当浏览者粘贴系统剪贴板中的内容时通知目标对象 onContextMenu: 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [试试在页面中的中加入onContextMenu="return false"就可禁止使用鼠标右键了] onCopy: 当页面当前的被选择内容被复制后触发的事件 onCut: 当页面当前的被选择内容被剪切时触发的事件 onDrag: 当某个对象被拖动时触发的事件 [活动事件]

5.1.2 事件处理器 • onDragDrop: 一个外部对象被鼠标拖进当前窗口或者帧 onDragEnd:当鼠标拖动结束时触发的事件，即鼠标的按钮被释放了onDragEnter : 当对象被鼠标拖动的对象进入其容器范围内时触发的事件onDragLeave: 当对象被鼠标拖动的对象离开其容器范围内时触发的事件onDragOver: 当某被拖动的对象在另一对象容器范围内拖动时触发的事件 [活动事件] onDragStart : 当某对象将被拖动时触发的事件 onDrop HTML: 在一个拖动过程中，释放鼠标键时触发的事件 onLoseCapture: 当元素失去鼠标移动所形成的选择焦点时触发的事件 onPaste : 当内容被粘贴时触发的事件onSelect : 当文本内容被选择时的事件 onSelectStart :当文本内容选择将开始发生时触发的事件

5.1.2 事件处理器 • 数据绑定:onAfterUpdate : 当数据完成由数据源到对象的传送时触发的事件 onCellChange:当数据来源发生变化时 onDataAvailable : 当数据接收完成时触发事件 onDatasetChanged : 数据在数据源发生变化时触发的事件 onDatasetComplete : 当来子数据源的全部有效数据读取完毕时触发的事件 onErrorUpdate : 当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件 onRowEnter :当前数据源的数据发生变化并且有新的有效数据时触发的事件 onRowExit :当前数据源的数据将要发生变化时触发的事件 onRowsDelete : 当前数据记录将被删除时触发的事件 onRowsInserted : 当前数据源将要插入新数据记录时触发的事件

5.1.2 事件处理器 • 外部事件:onAfterPrint: 当文档被打印后触发的事件 onBeforePrint : 当文档即将打印时触发的事件 onFilterChange : 当某个对象的滤镜效果发生变化时触发的事件 onHelp : 当浏览者按下F1或者浏览器的帮助选择时触发的事件onPropertyChange : 当对象的属性之一发生变化时触发的事件 onReadyStateChange : 当对象的初始化属性值发生变化时触发的事件

5. 2 处理事件 • 事件处理步骤： 1)定义可以被js识别和处理的事件 2) 将事件和事件处理代码连接起来针对以上步骤，js有两种处理方式： 1)作为HTML属性的事件处理方式 2) 作为JavaScript属性的事件处理方式

5.2.1通过HTML属性处理事件 • 该种方法中，事件处理器作为html的属性值来表示和应用。 <input type=“button” value=“click me” onClick=“alert(‘您单击按钮了！’)”> • 事件处理器属性的值可以是任意的js代码，如为多个语句，语句间必须用；隔开。更好的方法是使用函数来完成事件处理。

5.2.1通过HTML属性处理事件 • <html> • <head> • <title>example:作为html属性的事件处理器</title> • <script language="javascript"> • function printMessage(message) • { • alert(message); • } • </script> • </head> • <body> • <h3>example:作为html属性的事件处理器</h3> • <input type="button" value="直接输出信息按钮" onClick="alert('您单击了按钮!直接输出了信息！')"> • <input type="button" value="通过函数输出信息按钮" onClick="printMessage('单击按钮后先调用函数，通过函数输出信息！')"> • </body> • </html>

5.2.2 通过js属性处理事件 • 这种方式允许程序像操作js属性一样来处理事件。 <input type=“button” name=“infoButton” value=“click me” onClick=“alert(‘按钮的click事件被触发！’)”> document.forms[0].infoButton.onclick=function() { alert(‘按钮的click事件被触发！’);}

5.2.2 通过js属性处理事件 优点： 1)减少了html和js代码的混合使用，使代码简洁便于维护 2)事件处理器代码不必是确定的，可以根据需要动态创建和修改注意：作为html属性的事件处理器不区分大小写，而javascript事件处理器的属性必须采用小写字母，如onclick,onload等。

5.3 javascript中的事件处理 • 处理链接事件 • 处理窗口事件 • 处理图形事件 • 处理图形映射事件 • 处理窗体事件 • 处理错误事件

5.3.1处理链接事件 • 常用的有click,mouseOver,mouseOut事件。 • 要处理链接其他类型的事件，只需更改事件处理器及其对应代码即可。 • 可以对同一个链接注册多个事件处理器，当发生不同事件时，就调用相应的事件处理器执行处理程序。

5.3.2处理窗口事件 • 窗口事件主要用来处理普通的html文档，常用的有load事件，unload事件，blur事件，focus事件等。 • 页面加载会触发窗口的onload事件 • 刷新或关闭页面会触发窗口的unload事件

5.3.3处理图形事件 • <html> • <head> • <title>example:图形的load事件</title> • <script language="javascript"> • function imageLoadHandle() • { • alert('图形加载完成！'); • } • </script> • </head> • <body> • <h3>example:图形的load事件</h3> • <img src="./beauty.jpg" onload="imageLoadHandle()"> • </body> • </html>

5.3.4处理图形映射事件 • 图形映射由分布在不同区域的图形组成，用户单击图形的某个区域，便可连接与该区域相关的URL。 • JS对图形映射提供的事件支持与对链接提供的事件支持相同。

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

5.3.6处理错误事件 • Js1.1中引入了error事件，提供了脚本执行过程中处理错误的功能。只要页面中出现脚本错误，就会产生 onerror 事件。当程序出现错误时，error事件会在window对象上触发。 • 错误事件的事件处理函数由浏览器自动执行，通过3个参数（errormessage,url,line）传递错误信息： 1) 第一个参数描述所发生错误的信息； 2) 第二个参数是个URL，指明引起错误的js代码所在文档； 3) 第三个参数是该文档中错误代码所在行的行号。

5.3.6处理错误事件 • 如果需要利用 onerror 事件，就必须创建一个处理错误的函数，你可以把这个函数叫作 onerror 事件处理器 (onerror event handler)。这个事件处理器使用三个参数来调用：errormessage,url,line。语法： onerror=handleErr； function handleErr(errormessage,url,line) • { • //Handle the error here • return true or false • } • 浏览器是否显示标准的错误消息，取决于onerror 的返回值。如果返回值为 false，则在控制台 (JavaScript console) 中显示错误消息。反之则不会。

5.4 事件对象 • Js1.2引入了event对象作为提供事件细节信息的机制， event代表事件的状态，例如事件发生时的元素、鼠标的位置等等，event对象只在事件过程中才有效。 • event对象包含了若干存储着事件细节信息的属性，可以通过访问event对象的属性来获取所发生事件的详细信息。 • 两种4.0浏览器都包含event对象。它在事件创立时产生，如点击一个可点击的对象，移动鼠标，或聚焦到一个窗体元素上。Event对象被创建然后传递给处理事件的函数。

5.4 事件对象 • 下面是event对象属性的描述，以及Netscape和IE处理它们的方式：

5.4 事件对象 • IE对事件的引用：在IE4以上版本中，event对象作为window属性访问：window.event。其中引用的window部分是可选的．因此脚本就像全局引用一样来对待event对象： event．propertyName function showLocation() { alert(“光标的水平位置:”+event.screenX+”,光标的垂直位置:”+event.screenY); }

5.4 事件对象 • Navigator对事件的引用：不定义全局性的event对象，而是将event对象作为参数传给事件处理器。 function showLocation(eventObject) { alert(“光标的水平位置:”+eventObject.screenX+”,光标的垂直位置:”+eventObject.screenY); } 为保证代码兼容，应在事件处理器函数中显式地设置event对象为参数，保证在不同浏览器中实现相同功能。

5.4 事件对象（示例） • 下面的例子使用了 event 对象来决定用户单击的位置是否在链接上，并且避免在 SHIFT 键按下时导航到链接。 <HTML><HEAD><TITLE>取消链接</TITLE><SCRIPT LANGUAGE="JScript">function cancelLink() {if (window.event.srcElement.tagName == "A" && window.event.shiftKey) window.event.returnValue = false;}</SCRIPT><BODY onclick="cancelLink()"></BODY> </HTML>

5.4 事件对象（示例） • 下面的例子在状态栏上显示鼠标的当前位置。 • <BODY onmousemove="window.status='x='+window.event.x+'y='+window.event.y"> • 请按任意键，你将得到该键的键值！ <body onkeypress=“alert(event.keyCode)”>

5.4 事件对象（示例） • 下面的代码片断演示了当在图片上点击（onclick）时，如果同时shift键也被按下，就取消上层元素（body）上的事件onclick所引发的showSrc()函数。 <SCRIPT LANGUAGE="JScript">function checkCancel() { if (window.event.shiftKey) window.event.cancelBubble = true;}function showSrc() { if (window.event.srcElement.tagName == "IMG") alert(window.event.srcElement.src);}</SCRIPT><BODY onclick="showSrc()"><IMG onclick="checkCancel()" SRC="sample.gif">

5.5 小结 • JavaScript之所以可以与用户互动，是因为JavaScript的事件驱动与事件处理机制。由于事件驱动是由浏览器所产生的，所以不同的浏览器可以产生的事件是不相同的。 • 事件是浏览器响应用户操作的机制,说明了用户与web页面交互时产生的操作. • js事件处理步骤： 1)定义可以被js识别和处理的事件 2) 将事件和事件处理代码连接起来 • Js处理事件两种方式: 1)作为HTML属性的事件处理方式 2) 作为JavaScript属性的事件处理方式 • Js 引入event对象作为提供事件细节信息的机制,可以通过访问event对象的属性来获取所发生事件的详细信息.

第 5 章事件和事件处理