21世纪高等学校计算机规划教材第8章JavaScript事件处理模型

第8章

事件处理模型

事件是JavaScript和DOM之间进行交互的桥梁，当某个事件发生时，通过它的处理函数执行相应的JavaScript代码。页面加载完成时，会触发load事件，用户单击按钮时会触发click事件。通过编写这些事件的处理函数，可以实现对事件的响应，如向用户显示提示信息、关闭窗口等。本章将要介绍的是DOM的事件处理模型，包括事件流机制、事件处理函数和事件对象，IE在事件处理方面采取不同于DOM的方式，因此本章也对IE中的事件处理模型进行了单独讲解。最后，本章通过应用例如说明如何在Web开发中使用事件处理模型解决实际的问题。事件流8.1事件处理函数8.2事件对象8.3事件处理应用示例8.48.1事件流DOMLevel2中对事件流进行了定义，但在DOM标准出现之前，浏览器已经实现了对事件的支持。当时的浏览器是IE4.0和NetscapeNavigator4.0，它们都实现了事件流的机制，但是它们在事件的处理顺序上是不同的：IE4.0采用了事件冒泡的方式，即事件从最特定的事件目标传播到最不特定的事件目标，而NetscapeNavigator4.0那么恰恰相反，采取了捕获型的事件流机制。DOM标准那么吸取了两者的优点，采用了捕获+冒泡的方式。本节将分别介绍DOM和IE的事件流模型。8.1.1DOM事件流模型在DOM兼容浏览器中，事件流分为3个阶段：〔1〕捕获阶段：事件从Document节点自上而下向目标节点传播的阶段；〔2〕目标阶段：真正的目标节点正在处理事件的阶段；〔3〕冒泡阶段：事件从目标节点自下而上向Document节点传播的阶段。【例8-1】ex1.html〔HTML局部〕DOM事件模型最独特的性质是，文本节点也触发事件〔在IE中不会〕，当鼠标单击“单击此文本〞文本时会触发click事件，该事件的事件流如图8-1所示。从图中可以看到，事件的捕获阶段最先开始，从Document节点开始逐渐向下传播，直到“单击此文本〞文本节点，事件进入目标阶段，在目标阶段结束之后，事件由“单击此文本〞文本节点开始事件的冒泡阶段，直到Document节点为止。另外，需要说明的是，有些事件是可以取消的，在整个事件流的任何位置通过调用事件的stopPropagation方法可以停止事件的传播过程。图8-1DOM事件流

8.1.2IE事件流模型IE的事件模型与DOM事件模型的最根本区别在于事件流的传播方式。

DOM事件模型的事件流包括3个阶段，即捕获阶段、目标阶段和冒泡阶段，对于canBubble属性为false的事件而言，包含捕获阶段和目标阶段，而IE中的事件流仅包含冒泡阶段。图8-2IE中的事件流8.2事件处理函数用于响应某个事件而调用的函数称为事件处理函数，事件处理函数既可以通过JavaScript进行分配，也可以在HTML中指定。例如：varbtn=document.getElementById("btn");btn.onclick=function(){alert("你好");};也可以在HTML代码中进行声明：<buttonid="btn"onclick="alert('你好')">按钮</button>以上的方法在IE和DOM兼容浏览器中均可使用，但是这种传统的方法不能为事件指定多个事件处理函数。DOM模型和IE都提供了相应的方法为事件添加处理函数，这些方法可以为事件添加多个处理函数。由于DOM标准和IE在事件流机制上的区别，它们在事件处理函数方面也采用了不同的方式。8.2.1DOM事件处理函数DOM标准提供了以下相关接口：〔1〕EventTarget〔2〕EventListener1．添加事件处理函数根据EventTarget接口的定义，调用事件目标元素的addEventListener方法即可为事件添加相应的处理函数。以例8-1中的HTML页面为例，通过JavaScript脚本可以为3个<div>元素添加click事件的处理函数。根据事件处理函数的输出，我们可以看到事件的响应过程，相关的脚本代码如例8-2所示。【例8-2】ex1.html〔JavaScript局部〕图8-3添加事件处理函数

【例8-3】ex3.html〔JavaScript局部〕〔a〕〔b〕图8-4useCapture参数的使用

2．删除事件处理函数通过addEventListener方法添加的事件处理函数，必须使用removeEventListener方法才能删除，而且要求参数与添加事件处理函数时addEventListener方法的参数完全一致〔包括useCapture参数〕，否那么将不能成功删除事件处理函数。仍然以例8-1中的测试页面为例，我们希望top和middle这两个<div>元素对click事件仅响应一次，再次单击“单击此文本〞时页面不再输出top和middle的相关信息。实现这个目标的方法是在事件响应函数的最后局部删除事件处理函数。修改后的handleTop和handleMiddle函数如例8-4所示。【例8-4】ex4.html〔JavaScript局部〕3．手动指派事件手动指派事件是指在事件并没有实际发生的情况下触发该事件，模拟事件发生的效果。

DOM标准中EventTarget接口的dispatchEvent方法可以允许用户手动指派事件，实现模拟事件的效果。在DOM中手动指派事件的步骤如下：〔1〕调用DocumentEvent接口的createEvent方法创立事件对象；〔2〕调用事件对象的initEvent〔或者子接口的初始化事件方法〕；〔3〕调用EventTarget接口的dispatchEvent方法触发事件。8.2.2IE事件处理函数IE的事件流模型只存在冒泡阶段，因此在添加/删除事件处理函数时不需要指定事件在哪个阶段触发，手动指派事件的方式也与DOM存在区别。1．添加/删除事件处理函数在IE中使用attachEvent和detachEvent方法添加/删除事件处理函数

在DOM事件模型中addEventListener/removeEventListener方法在调用时需要传入3个参数，其中第3个参数useCapture指明了事件处理函数是否在捕获阶段触发。在IE的事件模型中只有冒泡阶段，因此attachEvent/detachEvent只有两个参数：〔1〕sEvent：事件类型字符串，如“onclick〞〔在DOM中使用“click〞作为事件类型字符串〕；〔2〕fpNotify：事件处理函数。IE和DOM在添加事件处理函数时的另一个区别是：attachEvent方法将返回一个布尔值，提示添加事件处理函数的操作是否成功，而DOM事件模型中addEventListener方法无返回值。2．手动指派事件在IE中手动指派事件需要完成和DOM中类似的工作，但实现方式不同，具体步骤如下。〔1〕创立和初始化事件对象〔2〕触发事件〔a〕单击内部div元素〔b〕单击外部div元素图8-5IE手动指派事件测试

8.3事件对象在进行事件处理时，获取事件信息是很重要的。因此，DOM标准和IE中都提供了事件对象，其中包含的事件信息有：〔1〕引发事件的对象；〔2〕事件发生时鼠标的信息；〔3〕事件发生时键盘的信息。事件对象只有在事件发生时才被创立，只有事件处理函数才能访问，在事件处理完毕之后，事件对象即被销毁。当然，DOM和IE采用了不同方式实现事件对象。8.3.1DOM事件对象DOM标准的事件对象是Event接口，UIEvent、MouseEvent等接口直接或者间接继承自它，分别用于处理不同类型的事件。键盘事件比较特殊，在DOMLevel3中才完整地标准化，而目前还没有浏览器支持DOMLevel3，目前最接近DOM标准的实现是MozillaFilefox，本节将对MozillaFilefox中的键盘事件进行介绍。1．Event接口DOM标准对事件对象的获取进行了限定，事件对象必须作为唯一的参数传给事件处理函数。事件对象中包含了DOM事件发生时相关的上下文信息，它实现的DOM标准接口是Event

2．DocumentEvent接口DocumentEvent接口提供了一种由用户创立事件的机制，该接口只定义了一个方法createEvent，其作用是创立一个指定类型的事件对象表8-1 事件接口类型事件接口类型eventType参数值对应子接口支持的事件类型（type）用户界面事件UIEventsUIEventDOMActivate,DOMFocusIn,DOMFocusOut鼠标事件MouseEventsMouseEventclick,mousedown,mousemove,mouseout,mouseover,mouseup变化事件MutationEventsMutationEventDOMSubtreeModified,DOMNodeInserted,DOMNodeRemoved,DOMNodeRemovedFromDocument,DOMNodeInsertedIntoDocument,DOMAttrModified,DOMCharacterDataModifiedHTML事件HTMLEventsEventabort,blur,change,error,focus,load,reset,resize,scroll,select,submit,unload3．用户界面事件用户界面事件指的是DOM元素激活、获得焦点和失去焦点时触发的事件，它对应的接口是UIEvent，它是Event的子接口

用户界面事件支持以下事件类型。〔1〕DOMActivate〔2〕DOMFocusIn〔3〕DOMFocusOut4．鼠标事件用户界面事件通常很少直接使用，UIEvent接口更重要的作用是作为鼠标事件MouseEvent接口的父接口。鼠标事件指的是由鼠标的点击、移动等操作引发的事件，常用的事件包括click，mousedown，mouseover等。

图8-6鼠标事件的relateTarget属性

【例8-6】ex6.html

图8-7relateTarget属性测试页面

表8-2 鼠标事件事

件

类

型BCB&DROthersclick√√√×√mousedown√√√×√mouseup√√√×√mouseover√√√√√mousemove√×√×√mouseout√√√√√5．键盘事件DOMLevel3提供了完整的键盘事件定义，但是到目前为止在主流浏览器中还没有相应地实现。尽管如此，大多数浏览器都支持用户对键盘事件编程，它们的实现方式与DOM标准存在着一些差异。本节将讨论MozillaFirefox中的键盘事件，这也是与DOM标准最接近的一种实现。键盘事件包括以下3类：〔1〕keydown〔2〕keypress〔3〕keyup【例8-7】ex7.html

三个事件的处理函数内容完全相同，这样做的目的主要是为了方便单独在某个事件的处理函数中设置断点。图8-8使用Firebug观察事件属性

表8-3 键盘事件按

键keydown事件keypress事件keyup事件a65，0，650，97，9765，0，65A65，0，650，65，6565，0，65z90，0，900，122，12290，0，90Z90，0，900，90，9090，0，90Shift16，0，16×16，0，16Ctrl17，0，17×17，0，17Alt18，0，18×18，0，18Home36，0，3636，0，036，0，36End35，0，3535，0，035，0，35PageUp33，0，33×33，0，33PageDown34，0，34×34，0，34←37，0，37×37，0，37↑38，0，38×38，0，38→39，0，39×39，0，39↓40，0，40×40，0，40F1112，0，112112，0，0112，0，112F12123，0，123123，0，0123，0，123Esc27，0，2727，0，027，0，27Capslock20，0，20×20，0，20Numlock144，0，144×144，0，144Ins45，0，4545，0，045，0，45Del46，0，4646，0，046，0，46按

键keydown事件keypress事件keyup事件Backspace8，0，88，0，88，0，8Enter13，0，1313，0，1313，0，13Tab9，0，99，0，09，0，96．HTML事件HTML事件是指由HTML页面中的元素触发的事件，它在DOM标准中对应的接口是Event。表8-4列举了HTML事件支持的事件类型，其中B列表示事件是否为冒泡事件，C列表示事件是否可取消。表8-4 HTML事件事

件

类

型BC支持该事件的HTML元素load××<body>,<frameset>,<iframe>,<img>,<object>unload××<body>,<frameset>abort√×<img>,<object>error√×<body>,<frameset>,<img>,<object>select√×<input>,<textarea>change√×<input>,<select>,<textarea>submit√√<form>reset√×<form>focus××<a>,<area>,<button>,<input>,<label>,<select>,<textarea>blur××<a>,<area>,<button>,<input>,<label>,<select>,<textarea>resize√×<body>,<frameset>,<iframe>scroll√×<body>8.3.2IE事件对象IE的事件对象是window对象的一个属性，这是IE的事件对象与DOM事件对象的最大区别。在IE中可以使用window.event或者event获取当前的事件对象，而在DOM中是通过事件处理函数的参数进行传递的。

1．获取触发事件的对象2．事件流处理3．事件定位4．其他8.4事件处理应用例如8.4.1商品评级功能〔a〕〔b〕图8-9传统商品评级功能