JavaScript中为事件指定处理程序的五种方式分析

本文实例讲述了JavaScript中为事件指定处理程序的五种方式。分享给大家供大家参考，具体如下：

JavaScript和HTML之间的交互是通过事件实现的。

IE9、Firefox、Opera、Sarifi、Chrome都已经实现了DOM2级事件模块的核心部分，IE8是最后一个仍然使用其专有事件系统的主要浏览器。

事件流：

事件流描述的是从页面中接受事件的顺序，但IE和Netscape却提出了完全相反的事件流的概念，IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流。

1) 事件冒泡

事件开始时由最具体的元素（文档中嵌套层次最深的那个节点接收，然后逐级向上传播到较为不具体的节点（文档）。

不支持事件冒泡的事件：blur、focus、load、unload。

2) 事件捕获

不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于事件到达预定目标之前捕获它。

虽然IE9、Safari、Chrome、Firefox、Opera都支持事件捕获和事件冒泡，但IE8及其更早版本只支持事件冒泡，不支持事件捕获，因此。建议使用事件冒泡，在有特殊需要的时候再使用事件捕获。

DOM事件流：

DOM2级事件规定的事件流包括三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。实际上，在事件捕获阶段预定目标不会接收到事件，处于目标阶段事件在预定目标上发生。事件处理中，处于目标阶段被看成事件冒泡阶段的一部分。但是，即使“DOM2级事件”规范明确要求捕获阶段不会涉及事件目标，但IE9、 Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件，结果是有两个机会在目标对象上操作事 件。

IE9、Firefox、Opera、Sarifi、Chrome都支持DOM事件流，IE8及其更早版本不支持DOM事件流。

事件处理程序：

事件就是用户或浏览器自身执行的某种动作，而响应某个事件的函数就是事件处理程序（或事件侦听器），事件处理程序的名字以“on”开头。

JavaScript中有五种事件处理程序方式：

1) HTML事件处理程序

每种事件都可以使用一个与相应事件处理程序同名的HTML特性来指定，特性的值可以是能够执行的JavaScript代码，也可以是函数。函数中有一个局部变量event，通过event变量可以访问事件对象；在函数内部，this值等于事件的目标元素。

在HTML中指定事件处理程序的几个缺点：

①　时差问题：用户可能在HTML元素一出现在页面上就触发相应的事件，但当时的事件处理程序有可能尚不具备执行条件，如用户在解析事件处理函数之前就触发事件。为此，很多HTML事件处理程序都会封装在一个try-catch块中，以便及时捕获错误，以免错误抛出被用户看到。