JavaScript应用核心：事件处理概述

文章转载自网管之家：http://www.bitscn.com/school/Javascript/201009/190655_4.html


事件(Event)是JavaScript应用跳动的心脏，也是把所有东西粘在一起的胶水。当我们与浏览器中Web页面进行某些类型的交互时，事件就发生了。

事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是Web浏览器中发生的事情，比如说某个Web页面加载完成，或者是用户滚动窗口或改变窗口大小。

51CTO推荐阅读：详解Javascript事件驱动的来龙去脉

今天的事件

在漫长的演变史，我们已经告别了内嵌式的事件处理方式（直接将事件处理器放在 HTML 元素之内来使用）。今天的事件，它已是DOM的重要组成部分，遗憾的是， IE继续保留它最早在IE4.0中实现的事件模型，以后的IE版本中也没有做太大的改变，这也就是说IE还是使用的是一种专有的事件模型（冒泡型）,而其它的主流浏览器直到DOM 级别3 规定定案后，才陆陆续续支持DOM标准的事件处理模型 — 捕获型与冒泡型。

历史原因是：W3C规范在DOM级别1中并没有定义任何的事件，直到发布于2000年11月的DOM级别2才定义了一小部分子集，DOM级别2中已经提供了提供了一种更详细的更细致的方式以控制Web页面中的事件，最后，完整的事件是在2004年DOM级别3的规定中才最终定案。因为IE4是1995推出的并已实现了自己的事件模型（冒泡型），当时根本就没有DOM标准，不过在以后的DOM标准规范过程中已经把IE的事件模型吸收到了其中。

目前除IE浏览器外，其它主流的Firefox, Opera,Safari都支持标准的DOM事件处理模型。IE仍然使用自己专有的事件模型，即冒泡型，它事件模型的一部份被DOM标准采用，这点对于开发者来说也是有好处的，只有使用DOM标准，IE都共有的事件处理方式才能有效的跨浏览器。

DOM事件流

DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程可称为DOM事件流。事件顺序有两种类型：事件捕捉和事件冒泡。

冒泡型事件(Event Bubbling)

这是IE浏览器对事件模型的实现，也是最容易理解的，至少笔者觉得比较符合实际的。冒泡，顾名思义，事件像个水中的气泡一样一直往上冒，直到顶端。从
DOM树型结构上理解，就是事件由叶子节点沿祖先结点一直向上传递直到根节点；从浏览器界面视图HTML元素排列层次上理解就是事件由具有从属关系的最确定的目标元素一直传递到最不确定的目标元素.冒泡技术.冒泡型事件的基本思想,事件按照从特定的事件目标开始到最不确定的事件目标.

捕获型事件(Event Capturing)

Netscape 的实现，它与冒泡型刚好相反，由DOM树最顶层元素一直到最精确的元素，这个事件模型对于开发者来说（至少是我..）有点费解，因为直观上的理解应该如同冒泡型，事件传递应该由最确定的元素，即事件产生元素开始。

DOM标准的事件模型

我们已经对上面两个不同的事件模型进行了解释和对比。DOM标准同时支持两种事件模型，即捕获型事件与冒泡型事件，但是，捕获型事件先发生。两种事件流都会触发DOM中的所有对象，从document对象开始，也在document对象结束（大部分兼容标准的浏览器会继续将事件是捕捉/冒泡延续到window对象）。

DOM标准的事件模型最独特的性质是,文本节点也会触发事件(在IE不会)。

事件传送

为了更好的说明DOM标准中的事件流原理，我们把它放在“事件传送”小结里来更具体的解释。

显然，如果为一个超链接添加了click事件监听器，那么当该链接被点击时该事件监听器就会被执行。但如果把该事件监听器指派给了包含该链接的p元素或者位于DOM树顶端的document节点，那么点击该链接也同样会触发该事件监听器。

这是因为事件不仅仅对触发的目标元素产生影响，它们还会对沿着DOM结构的所有元素产生影响。这就是大家所熟悉的事件转送。W3C事件模型中明确地指出了事件转送的原理。事件传送可以分为3个阶段。

（1）.在事件捕捉（Capturing）阶段，事件将沿着DOM树向下转送，目标节点的每一个祖先节点，直至目标节点。例如，若用户单击了一个超链接，则该单击事件将从document节点转送到html元素，body元素以及包含该链接的p元素。在此过程中，浏览器都会检测针对该事件的捕捉事件监听器，并且运行这件事件监听器。

（2）在目标（target）阶段，浏览器在查找到已经指定给目标事件的事件监听器之后，就会运行 该事件监听器。目标节点就是触发事件的DOM节点。例如，如果用户单击一个超链接，那么该链接就是目标节点（此时的目标节点实际上是超链接内的文本节点）。

（3）.在冒泡（Bubbling）阶段，事件将沿着DOM树向上转送，再次逐个访问目标元素的祖先节点到document节点。该过程中的每一步。浏览器都将检测那些不是捕捉事件监听器的事件监听器，并执行它们。

并非所有的事件都会经过冒泡阶段的

所有的事件都要经过捕捉阶段和目标阶段，但是有些事件会跳过冒泡阶段。例如，让元素获得输入焦点的focus事件以及失去输入焦点的blur事件就都不会冒泡。


事件句柄和事件接听器

事件句柄

事件句柄（又称事件处理函数，DOM称之为事件监听函数），用于响应某个事件而调用的函数称为事件处理函数。每一个事件均对应一个事件句柄，在程序执行时，将相应的函数或语句指定给事件句柄，则在该事件发生时，浏览器便执行指定的函数或语句，从而实现网页内容与用户操作的交互。当浏览器检测到某事件发生时，便查找该事件对应的事件句柄有没有被赋值，如果有，则执行该事件句柄。

我们认为响应点击事件的函数是onclick事件处理函数。以前，事件处理函数有两种分配方式：在JavaScript中或者在HTML中。如果在JavaScript 中分配事件处理函数， 则需要首先获得要处理的对象的一引用，然后将函数赋值给对应的事件处理函数属性，请看一个简单的例子：

var link=document.getElementById("mylink");  link.onclick=function(){   alert("I was clicked !");  };  从我们看到的例子中，我们发现使用事件句柄很容易，不过事件处理函数名称必须是小写的，还有就是只有在元素载入完成之后才能将事件句柄赋给元素，不然会有异常。如果在HTML中分配事件句柄的话，则直接通过HTML属性来设置事件处理函数就行了，并在其中包含合适的脚本作为特性值就可以了，例如：

<a href="/" onclick="JavaScript code here">......</a> 这种JavaScript代码和通过HTML的style属性直接将CSS属性赋给元素类似。这样会代码看起来一团糟，也违背了将实现动态行为的代码与显示文档静态内容的代码相分离的原则。从1998年开始，这种写法就过时了。这种传统的事件绑定技术，优缺点是显然的：

◆简单方便，在HTML中直接书写处理函数的代码块，在JS中给元素对应事件属性赋值即可。

◆IE与DOM标准都支持的一种方法，它在IE与DOM标准中都是在事件冒泡过程中被调用的。

◆可以在处理函数块内直接用this引用注册事件的元素，this引用的是当前元素。

◆要给元素注册多个监听器，就不能用这方法了。

事件接听器

除了前面已经介绍的简单事件句柄之外，现在大多数浏览器都内置了一些更高级的事件处理方式，即，事件监听器，这种处理方式就不受一个元素只能绑定一个事件句柄的限制。

我们已经知道了事件句柄与事件监听器的最大不同之处是使用事件句柄时一次只能插接一个事件句柄，但对于事件监听器，一次可以插接多个。

IE下的事件监听器

IE提供的却是一种自有的，完全不同的甚至存在BUG的事件监听器，因此如果要让脚本在本浏览器中正常运行的话，就必须使用IE所支持的事件监听器。另外，Safari 浏览器中的事件监听器有时也存在一点不同。在IE中，每个元素和window对象都有两个方法：attachEvent方法和detachEvent方法。