《世纪高等学校计算机规划教材第8章javascript事件处理模型》由会员分享，可在线阅读，更多相关《世纪高等学校计算机规划教材第8章javascript事件处理模型（62页珍藏版）》请在金锄头文库上搜索。
1、第8章 事件处理模型,事件是JavaScript和DOM之间进行交互的桥梁，当某个事件发生时，通过它的处理函数执行相应的JavaScript代码。 页面加载完成时，会触发load事件，用户单击按钮时会触发click事件。 通过编写这些事件的处理函数，可以实现对事件的响应，如向用户显示提示信息、关闭窗口等。,本章将要介绍的是DOM的事件处理模型，包括事件流机制、事件处理函数和事件对象，IE在事件处理方面采取不同于DOM的方式，因此本章也对IE中的事件处理模型进行了单独讲解。 最后，本章通过应用示例说明如何在Web开发中使用事件处理模型解决实际的问题。,8.1 事 件 流,DOM Level 2中
2、对事件流进行了定义，但在DOM标准出现之前，浏览器已经实现了对事件的支持。 当时的浏览器是IE 4.0和Netscape Navigator 4.0，它们都实现了事件流的机制，但是它们在事件的处理顺序上是不同的：,IE 4.0采用了事件冒泡的方式，即事件从最特定的事件目标传播到最不特定的事件目标，而Netscape Navigator 4.0则恰恰相反，采取了捕获型的事件流机制。 DOM标准则吸取了两者的优点，采用了捕获+冒泡的方式。 本节将分别介绍DOM和IE的事件流模型。,8.1.1 DOM事件流模型,在DOM兼容浏览器中，事件流分为3个阶段： （1）捕获阶段：事件从Document节点自
3、上而下向目标节点传播的阶段； （2）目标阶段：真正的目标节点正在处理事件的阶段； （3）冒泡阶段：事件从目标节点自下而上向Document节点传播的阶段。,【例8-1】 ex1.html（HTML部分） DOM事件模型最独特的性质是，文本节点也触发事件（在IE中不会），当鼠标单击“单击此文本”文本时会触发click事件，该事件的事件流如图8-1所示。 从图中可以看到，事件的捕获阶段最先开始，从Document节点开始逐渐向下传播，直到“单击此文本”文本节点，事件进入目标阶段，在目标阶段结束之后，事件由“单击此文本”文本节点开始事件的冒泡阶段，直到Document节点为止。,另外，需要说明的是，
4、有些事件是可以取消的，在整个事件流的任何位置通过调用事件的stopPropagation方法可以停止事件的传播过程。,图8-1 DOM事件流,8.1.2 IE事件流模型,IE的事件模型与DOM事件模型的最根本区别在于事件流的传播方式。 DOM事件模型的事件流包括3个阶段，即捕获阶段、目标阶段和冒泡阶段，对于canBubble属性为false的事件而言，包含捕获阶段和目标阶段，而IE中的事件流仅包含冒泡阶段。,图8-2 IE中的事件流,8.2 事件处理函数,用于响应某个事件而调用的函数称为事件处理函数，事件处理函数既可以通过JavaScript进行分配，也可以在HTML中指定。例如： var b
5、tn = document.getElementById(“btn“); btn.onclick = function() alert(“你好“); ; 也可以在HTML代码中进行声明： 按钮,以上的方法在IE和DOM兼容浏览器中均可使用，但是这种传统的方法不能为事件指定多个事件处理函数。 DOM模型和IE都提供了相应的方法为事件添加处理函数，这些方法可以为事件添加多个处理函数。 由于DOM标准和IE在事件流机制上的区别，它们在事件处理函数方面也采用了不同的方式。,8.2.1 DOM事件处理函数,DOM标准提供了下列相关接口： （1）EventTarget （2）EventListener,1
6、添加事件处理函数,根据EventTarget接口的定义，调用事件目标元素的addEventListener方法即可为事件添加相应的处理函数。 以例8-1中的HTML页面为例，通过JavaScript脚本可以为3个元素添加click事件的处理函数。 根据事件处理函数的输出，我们可以看到事件的响应过程，相关的脚本代码如例8-2所示。,【例8-2】 ex1.html（JavaScript部分）,图8-3 添加事件处理函数,【例8-3】 ex3.html（JavaScript部分）,（a） （b） 图8-4 useCapture参数的使用,2删除事件处理函数,通过addEventListener方法添
7、加的事件处理函数，必须使用removeEventListener方法才能删除，而且要求参数与添加事件处理函数时addEventListener方法的参数完全一致（包括useCapture参数），否则将不能成功删除事件处理函数。,仍然以例8-1中的测试页面为例，我们希望top和middle这两个元素对click事件仅响应一次，再次单击“单击此文本”时页面不再输出top和middle的相关信息。 实现这个目标的方法是在事件响应函数的最后部分删除事件处理函数。 修改后的handleTop和handleMiddle函数如例8-4所示。 【例8-4】 ex4.html（JavaScript部分）,3手动
8、指派事件,手动指派事件是指在事件并没有实际发生的情况下触发该事件，模拟事件发生的效果。 DOM标准中EventTarget接口的dispatchEvent方法可以允许用户手动指派事件，实现模拟事件的效果。,在DOM中手动指派事件的步骤如下： （1）调用DocumentEvent接口的createEvent方法创建事件对象； （2）调用事件对象的initEvent（或者子接口的初始化事件方法）； （3）调用EventTarget接口的dispatchEvent方法触发事件。,8.2.2 IE事件处理函数,IE的事件流模型只存在冒泡阶段，因此在添加/删除事件处理函数时不需要指定事件在哪个阶段触发，
9、手动指派事件的方式也与DOM存在区别。 1添加/删除事件处理函数 在IE中使用attachEvent和detachEvent方法添加/删除事件处理函数,在DOM事件模型中addEventListener/removeEventListener方法在调用时需要传入3个参数，其中第3个参数useCapture指明了事件处理函数是否在捕获阶段触发。在IE的事件模型中只有冒泡阶段，因此attachEvent/detachEvent只有两个参数：,（1）sEvent：事件类型字符串，如“onclick”（在DOM中使用“click”作为事件类型字符串）； （2）fpNotify：事件处理函数。 IE和D
10、OM在添加事件处理函数时的另一个区别是：attachEvent方法将返回一个布尔值，提示添加事件处理函数的操作是否成功，而DOM事件模型中addEventListener方法无返回值。,2手动指派事件,在IE中手动指派事件需要完成和DOM中类似的工作，但实现方式不同，具体步骤如下。 （1）创建和初始化事件对象 （2）触发事件,（a）单击内部div元素 （b）单击外部div元素 图8-5 IE手动指派事件测试,8.3 事 件 对 象,在进行事件处理时，获取事件信息是很重要的。 因此，DOM标准和IE中都提供了事件对象，其中包含的事件信息有： （1）引发事件的对象； （2）事件发生时鼠标的信息；
11、（3）事件发生时键盘的信息。,事件对象只有在事件发生时才被创建，只有事件处理函数才能访问，在事件处理完毕之后，事件对象即被销毁。 当然，DOM和IE采用了不同方式实现事件对象。,8.3.1 DOM事件对象,DOM标准的事件对象是Event接口，UIEvent、MouseEvent等接口直接或者间接继承自它，分别用于处理不同类型的事件。 键盘事件比较特殊，在DOM Level 3中才完整地标准化，而目前还没有浏览器支持DOM Level 3，目前最接近DOM标准的实现是Mozilla Filefox，本节将对Mozilla Filefox中的键盘事件进行介绍。,1Event接口,DOM标准对事件
12、对象的获取进行了限定，事件对象必须作为唯一的参数传给事件处理函数。 事件对象中包含了DOM事件发生时相关的上下文信息，它实现的DOM标准接口是Event,2DocumentEvent接口,DocumentEvent接口提供了一种由用户创建事件的机制，该接口只定义了一个方法createEvent，其作用是创建一个指定类型的事件对象,表8-1 事件接口类型,3用户界面事件,用户界面事件指的是DOM元素激活、获得焦点和失去焦点时触发的事件，它对应的接口是UIEvent，它是Event的子接口,用户界面事件支持下列事件类型。 （1）DOMActivate （2）DOMFocusIn （3）DOMFoc
13、usOut,4鼠标事件,用户界面事件通常很少直接使用，UIEvent接口更重要的作用是作为鼠标事件MouseEvent接口的父接口。 鼠标事件指的是由鼠标的点击、移动等操作引发的事件，常用的事件包括click，mousedown，mouseover等。,图8-6 鼠标事件的relateTarget属性,【例8-6】 ex6.html,图8-7 relateTarget属性测试页面,表8-2 鼠标事件,5键盘事件,DOM Level 3提供了完整的键盘事件定义，但是到目前为止在主流浏览器中还没有相应地实现。 尽管如此，大多数浏览器都支持用户对键盘事件编程，它们的实现方式与DOM标准存在着一些差异
14、。 本节将讨论Mozilla Firefox中的键盘事件，这也是与DOM标准最接近的一种实现。,键盘事件包括以下3类： （1）keydown （2）keypress （3）keyup,【例8-7】 ex7.html 三个事件的处理函数内容完全相同，这样做的目的主要是为了方便单独在某个事件的处理函数中设置断点。,图8-8 使用Firebug观察事件属性,表8-3 键盘事件,6HTML事件,HTML事件是指由HTML页面中的元素触发的事件，它在DOM标准中对应的接口是Event。 表8-4列举了HTML事件支持的事件类型，其中B列表示事件是否为冒泡事件，C列表示事件是否可取消。,表8-4 HTML
15、事件,8.3.2 IE事件对象,IE的事件对象是window对象的一个属性，这是IE的事件对象与DOM事件对象的最大区别。 在IE中可以使用window.event或者event获取当前的事件对象，而在DOM中是通过事件处理函数的参数进行传递的。,1获取触发事件的对象 2事件流处理 3事件定位 4其他,8.4 事件处理应用示例,8.4.1 商品评级功能,（a） （b） 图8-9 传统商品评级功能,（a） （b） 图8-10 商品评级功能,【例8-8】 ranking.html（HTML部分） 【例8-9】 ranking.html（JavaScript部分）,8.4.2 网络相册,图8-11
16、相册预览,【例8-10】 gallary.html（HTML部分）,图8-12 基于Script.aculo.us的相册预览,图8-13 thickbox图片预览,8.4.3 模拟拖放效果,拖放效果是一个提高用户体验的重要手段，在桌面应用中就大量使用了这种操作模式。 随着Ajax技术的普及，Web应用也越来越多地使用了拖放操作模式。,【例8-12】 dnd.html（HTML部分） 【例8-13】 dnd.html（JavaScript部分）,（a）开始拖放 （b）拖放过程中 图8-14 简单拖放效果,小 结,本章从事件流、事件处理函数和事件对象这3个方面对DOM和IE浏览器中的事件处理模型进行了讲解。 DOM和IE在事件处理方面的区别来自于不同的事件流模型，由此引发了两者在事件编程方面的一系列区别。 因此，对于需要兼容各种浏览器的We
