第3章 JavaScript事件处理

第3章JavaScript事件处理用户可以通过多种方式与浏览器中的页面进行交互，而事件是交互的桥梁。Web应用程序开发人员通过JavaScript脚本内置的和自定义的事件处理器来响应用户的动作，就可以开发出更具交互性、动态性的页面。本章主要介绍JavaScript脚本中的事件处理的概念、方法，列出了JavaScript预定义的事件处理器，并且介绍了如何编写用户自定义的事件处理函数以及如何将它们与页面中用户的动作相关联，以得到预期的交互性能。同时讲述了IE4和NN4对基本事件模型的扩展，以及DOM2标准事件模型的架构等。3.1什么是事件广义上讲，JavaScript脚本中的事件是指用户载入目标页面直到该页面被关闭期间浏览器的动作及该页面对用户操作的响应。事件的复杂程度大不相同，简单的如鼠标的移动、当前页面的关闭、键盘的输入等，复杂的如拖曳页面图片或单击浮动菜单等。事件处理器是与特定的文本和特定的事件相联系的JavaScript脚本代码，当该文本发生改变或者事件被触发时，浏览器执行该代码并进行相应的处理操作，而响应某个事件而进行的处理过程称为事件处理。下面就是简单的事件触发和处理过程，如图3.1所示。图3.1基本的用户动作触发事件示意图如前所述，JavaScript脚本中的事件并不限于用户的页面动作如MouseMove、Click等，还包括浏览器的状态改变，如在绝大多数浏览器获得支持的Load、Resize事件等。Load事件在浏览器载入文档时触发，如果某事件（如启动定时器、提前加载图片等）要在文档载入时触发，一般都在body标记里面加入类似于“onload=MyFunction()”的语句；Resize事件则在用户改变了浏览器窗口的大小时触发，当用户改变窗口大小时，有时需改变文档页面的内容布局，使其以恰当、友好的方式显示给用户。浏览器响应用户的动作，如鼠标单击按钮、链接等，并通过默认的系统事件与该动作相关联，但用户可以编写自己的脚本，来改变该动作的默认事件处理器。举个简单的例子，模拟用户单击页面链接的例子，该事件产生的默认操作是浏览器载入链接的href属性对应的URL地址所代表的页面，但利用JavaScript脚本可很容易编写另外的事件处理器来响应该单击鼠标的动作。考察如下代码：aname=MyAhref==javascript:this.href='鼠标单击页面中名为“MyLinker”的文本链接，其默认操作是浏览器载入该链接的href属性对应的URL地址（本例中为“”）所代表的页面，但程序员编写了自定义的事件处理器即：onclick=javascript:this.href='通过该JavaScript脚本代码，上述事件处理器取代了浏览器默认的事件处理器，并将页面引导至URL地址为“”指向的页面。现代事件模型中引入Event对象，它包含其它对象使用的常量和方法的集合。当事件发生后，产生临时的Event对象实例，并附加当前事件的信息如鼠标定位、事件类型等，然后传递给相关的事件处理器进行处理。事件处理完毕后，该临时Event对象实例所占据的内存空间被清理出来，浏览器等待其他事件的出现并进行处理。如果短时间内发生的事件较多，浏览器按事件按发生的顺序将这些事件排序，然后按照该顺序依次执行。事件发生的场合很多，包括浏览器本身的状态改变和页面中的按钮、链接、图片、层等。同时根据DOM模型，文本也可以作为对象，并响应相关动作，如鼠标双击、，文本被选择等。当然，事件的处理方法甚至于结果同浏览器环境有很大的关系，但总的来说，浏览器的版本越新，所支持的事件处理器就越多，支持也就越完善。基于此，在编写JavaScript脚本时，要充分考虑浏览器的兼容性，以编写适合大多数浏览器的安全脚本。3.2HTML文档事件HTML文档事件包括用户载入目标页面直到该页面被关闭期间浏览器的动作及该页面对用户操作的响应，主要分为浏览器事件和HTML元素事件两大类。在了解这两类事件之前，先来了解事件捆绑的概念。3.2.1事件捆绑HTML文档将元素的常用事件（如onclick、onmouseover等）当作属性捆绑在HTML元素上，当该元素的特定事件发生时，对应于此特定事件的事件处理器就被执行，并将处理结果返回给浏览器。事件捆绑导致特定的代码放置在其所处对象的事件处理器中。考察如下代码：ahref==javascript:alert('YouhaveClickedthelink!')MyLinker/a上述代码为“MyLinker”文本链接定义了一个Click事件的处理器，返回警告框“YouhaveClickedthelink!”。同样，也可将该事件处理器独立出来，编成单独的函数来实现同样的功能。将下列代码加入文档的body和/body标记对之间：ahref==MyClick()MyLinker/a自定义的函数MyClick()实现如下：functionMyClick(){alert(YouhaveClickedthelink!);}鼠标单击“MyLinker”链接后，浏览器调用自定义的Click事件处理器，并将结果（警告框“YouhaveClickedthelink!”）返回给浏览器。由事件处理器的实现形式来看，a标记的onclick事件与其href属性地位均等，实现了HTML中的事件捆绑策略。3.2.2浏览器事件浏览器事件指载入文档直到该文档被关闭期间的浏览器事件，如浏览器载入文档事件onload、关闭该文档事件onunload、浏览器失去焦点事件onblur、获得焦点事件onfocus等。先考察如下的代码：//源程序3.1!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.0//EN=Content-Typecontent=text/html;charset=gb2312titleSamplePage!/titlescripttype=text/javascript!--window.onload=function(){varmsg=\nwindow.load事件:\n\n;msg+=浏览器载入了文档!;alert(msg);}window.onfocus=function(){varmsg=\nwindow.onfocus事件:\n\n;msg+=浏览器取得了焦点!;alert(msg);}window.onblur=function(){varmsg=\nwindow.onblur事件:\n\n;msg+=浏览器失去了焦点!;alert(msg);}window.onscroll=function(){varmsg=\nwindow.onscroll事件:\n\n;msg+=用户拖动了滚动条!;alert(msg);}window.onresize=function(){varmsg=\nwindow.onresize事件:\n\n;msg+=用户改变了窗口尺寸!;alert(msg);}//--/script/headbodybrp载入文档:/pp取得焦点:/pp失去焦点:/pp拖动滚动条:/pp变换尺寸:/p/body/html将上述源程序保存为*.html（或*.htm）文档，双击该文档后系统调用默认的浏览器进行浏览。当载入该文档时，触发window.load事件，弹出警告框如图3.2所示。图3.2载入文档时触发window.load事件当把焦点给该文档页面时，触发window.onfocus事件，弹出警告框如图3.3所示。图3.3文档取得焦点时触发window.onfocus事件当该页面失去焦点时，触发window.blur事件，弹出警告框如图3.4所示。图3.4文档失去焦点时触发window.onblur事件当用户拖动滚动条时，触发window.onscroll事件，弹出警告框如图3.5所示。图3.5拖动滚动条，触发window.onscroll事件当用户改变文档页面大小时，触发window.onresize事件，弹出警告框如图3.6所示。图3.6改变文档页面大小，触发window.onresize事件浏览器事件一般用于处理窗口定位、设置定时器或者根据用户喜好设定页面层次和内容等场合，在页面的交互性、动态性方面使用较为广泛。注意：NetscapeNavigator4支持window.onmove事件，该事件在当前浏览器窗口被用户移动时触发，主要用于窗口的定位方面。InternetExplorer不支持window.onmove事件。3.2.3HTML元素事件页面载入后，用户与页面的交互主要指发生在如按钮、链接、表单、图片等HTML元素上的用户动作以及该页面对此动作所作出的响应。如简单的鼠标单击按钮事件，元素为button，事件为click，事件处理器为onclick()。只要了解了该事件的相关信息，程序员就可以编写此接口的事件处理程序，也称事件处理器，以完成诸如表单验证、文本框内容选择等功能。HTML文档中元素对应的事件因元素类型而异，表3.1按HTML4标记类型和字母顺序列出了当前通用版本浏览器上支持的事件。其中的标记代表标记对，如A代表A和/A标记对，其余类似。表3.1通用浏览器上定义的事件标记类型标记列表事件触发模型简要说明onclick鼠标单击链接ondbclick鼠标双击链接onmouseDown鼠标在链接的位置按下onmMouseOut鼠标移出链接所在的位置onmouseOver鼠标经过链接所在的位置onmouseUp鼠标在链接的位置放开onKeyDown键被按下onkeyPress按下并放开该键链接AonkeyUp键被松开onerror加载图片出现错误时触发onload图片加载时触发onkeyDown键被按下onkeyPress按下并放开该键图片IMGonkeyUp键被松开ondbClick双击该图形映射区域onmouseOut鼠标从该图形映射区域内移动到该区域之外区域AREAonmouseOver鼠标从该图形映射区域外移动到区域之内onblur文档正文失去焦点onclick在文档正文中单击鼠标ondbClick在文档正文中双击单击鼠标onkeyDown在文档正文中键被按下onkeyPress在文档正文中按下并放开该键onkeyUp在文档正文中键被松开onmouseDown在文档正文中鼠标按下文档主体BODYonmouseUp在文档正文中鼠标松开onblur当前窗口失去焦点onerror装入窗口时发生错误onfocus当前窗口获得焦点onload载入窗口时触发onresize窗口尺寸改变帧、帧组FRAMEFRAMESETonunload用户关闭当前窗口onreset窗体复位窗体FORMonsubmit提交窗体里的表单onblur按钮失去焦点onclick鼠标在按钮响应范围单击onfocus按钮获得焦点onmouseDown鼠标在按钮响应范围按下按钮INPUTTYPE=buttononmouseUp鼠标在按钮响应范围按下后弹起onblur复选框（或单选框）失去焦点onclick鼠标单击复选框（或单选框）复选框单选框INPUTTYPE=checkboxorradioonfocus复选框（或单选框）得到焦点onblur复位（或确认）按钮失去焦点oncl