《HTML教程》_第7章 事件处理7.1-7.3.pptxVIP

事件处理是编写动态网页的基础，网页可以对用户的操作做出响应。比如，在网页中按了一下方向键的左键，浏览器也不知道用户要做什么。那怎么办呢？于是浏览器采用了一种更为高明的方法，那就是定义许多事件，程序员可以通过向这些事件注册处理函数的办法进行相应的处理。

如刚才提到的在网页中按下方向键的左键，如果是在一款网页游戏中，那用户的意思是角色向左移动，那么网页游戏的程序员就可以对键盘事件进行注册，检查用户按下的键是否为向左的方向键，如果是则实现角色向左移动的操作。本章就对这种事件处理机制进行详细讲述。

7.1事件与传播机制

事件是浏览器响应用户操作的一种机制，对这一机制支持的一套措施称之为“事件模型”。JavaScript的事件模型并不单纯，目前使用的事件模型有两种，这两种事件模型并不完全一致，这就给大家掌握事件处理带来了一定的复杂性。

这两种事件模型分别是标准事件模型（由W3C制订）和IE事件模型，IE事件模型只有IE浏览器中使用，但却不能忽视它的存在，因为大部分计算机上运行的都是Windows操作系统，所以IE浏览器也占有巨大的市场份额，忽视它的存在无疑会带来严重的后果。

在IE事件模型还没有被标准事件模型和谐之前，还是要掌握两种事件模型。两种事件模型的不同之处在于事件对象、传播机制和事件处理上。下面分别说明这两处事件处理模型。标准模型的事件传播分为三个阶段[25]：

第一阶段称为“捕捉阶段（CapturePhase）”——是指事件发生后，从window对象沿着DOM树结构向目标节点传播。在这一阶段中，触发事件的节点的任何祖先注册了事件处理程序，都可以对该事件进行处理。

第二阶段称为“目标阶段（TargetPhase）”——此阶段发生在触发事件的节点本身，注册的事件处理程序（函数）会被执行。第三阶段称为“冒泡阶段（BubblingPhase）”——在此阶段中事件从触发节点沿着DOM树结构传回到window对象中。

标准事件模型的事件传播过程如图7-1所示。图中显示的是鼠标悬停在网面中表格的某单元格（其内容为RiverCharlie）上触发的事件的传播过程。为了巩固前面学习的DOM树结构（参见6.1节），请各位读者给出图7-1对应的HTML文档，进一步理解DOM树的结构。

图7-1标准事件模型的事件传播（图片来源W3C）

在标准事件模型中，所有事件的处理都可以在捕捉阶段进行，但并不是所有事件都可以在冒泡阶段进行处理。因为事件分为两类：输入事件和高级语义事件[25]。输入事件是由用户发起的，如鼠标单击事件；高级语义事件是由系统内部触发的事件，如网页的加载等。

高级语义事件是不支持冒泡传播的，所以在冒泡传播阶段是不能处理高级语义事件的。IE事件模型只支持冒泡形式的事件传播。所以，所有事件只能在冒泡阶段处理。事件传播机制决定了事件如何进行处理，所以请大家一定要理解这些内容。

7.2常用事件

DOMAPI提供200多个事件，还有浏览器各自提供的非标准事件，这么多事件没办法一一介绍，所以这里只介绍常用的事件。对于其他用到的事件，请参阅DOMAPI手册或相关网站。

常用事件包括鼠标事件、键盘事件、窗口事件、表单事件、拖拽事件（HTML5新增事件）、粘贴事件、打印事件、媒体事件（HTML5新增事件）、动画事件（新增的CSS3事件）、服务器发送事件和其他事件。

这里只讨论常用的鼠标事件、键盘事件、表单事件和一些其他事件，拖拽事件、媒体事件和动画事件的讨论已经超出了本书内容的范畴，请参阅HTML5和CSS3的相关书籍。常见事件如表7-1所示。

*注：所有事件请参考文献[26]。处理事件涉及到注册、取消事件处理函数——也称为事件处理器?，该部分内容将在7.4节进行介绍。?事件处理器——对于微软用户来说，此处不确切，删除下面介绍事件处理中非常重要的事件对象，它记录了事件发生时的详细信息，用于事件处理。

7.3事件对象

处理事件时需要知道事件的详细信息，这些详细信息，如事件源——即触发事件的DOM节点（或称为网页元素）或原因、事件发生鼠标的位置，或者触发事件的按键等，都记录在事件对象中。

事件对象的生成和传递在两种事件模型中是不同的：◆标准事件模型——事件对象在事件发生时生成，作为参数传递给事件处理函数。◆IE事件模型——事件对象作为Window对象的全局属性，在事件处理函数中直接访问。

7.3.1Event对象

Event对象是事件对象的基本对象，它记录了事件发生时详细的信息，通过它可以对事件进行更精细的操作。标准事件模型的Event常用属性如表7-2所示，常用方法如表7-3所示。IE事件模型的Event对象与标准Event对象略有不同，target属性在IE模型的Event对象中为srcEelement属性。

表7-3列出了