JavaScript事件模型演进：从原始模型到DOM2与IE兼容方案

原始事件模型与注册方式

一、原始事件模型

该模型下的事件类型主要划分为两类：输入型事件（例如 onclick）和语义型事件（例如 onsubmit）。

针对事件处理程序的注册，原始模型支持多种实现方式。

第一种方式是将 JavaScript 代码直接作为 HTML 元素的属性值进行绑定。

<input type="button" value="Press me" onclick="alert('thanks');"

第二种方式是将事件处理程序直接赋值给 JavaScript 对象的属性。

需要注意的是，文档中每个 HTML 元素在 DOM 树中都对应一个 JavaScript 对象。该对象的属性与 HTML 元素的属性一一对应。无论是通过 HTML 属性绑定的代码，还是通过 JS 属性绑定的处理程序，其本质最终都指向一个函数（function）。

<form name="f1">
<input name="b1" type="button" value="Press Me"/>
</form>

第一种赋值方式的具体实现如下：

document.f1.b1.onclick=function(){alert('thanks');};

第二种赋值方式的实现如下：

function plead(){window.status="Please Press Me!";}
document.f1.bi.onmouseover=plead;

通过 JS 属性绑定的事件处理程序，可以通过 JS 属性显式调用执行。

document.myfrom.onsubmit();

事件处理程序可以返回 false 以阻止浏览器执行该事件的默认动作，这在 onsubmit 事件中较为常见。但存在例外情况，例如对超链接 mouseover 事件的 window.status 显示处理，通常需要返回 true。示例如下：

<a href="help.htm" onmouseover="window.status='help';return true;">help</a>

DOM2标准事件模型详解

二、DOM2事件模型

该模型参考了 IE 的冒泡机制并由 W3C 制定为标准规范。与原始模型中事件发生即直接调用句柄不同，DOM2 模型引入了明确的事件传播过程，分为三个特定阶段：

(1) 捕获阶段（capturing phase）：事件从 document 节点向下传播至目标元素。在此过程中，若祖先元素注册了感兴趣的处理函数，则会被执行。

(2) 目标阶段（target phase）：事件到达目标元素，执行该目标元素上注册的事件处理函数。

(3) 冒泡阶段（bubbling phase）：事件从目标元素向上传播至 document。虽然所有事件类型都会经历捕获阶段，但仅部分事件会经历冒泡阶段（例如 submit 事件不会冒泡）。在传播过程中，可通过调用 event.stopPropagation() 停止事件传播，或调用 preventDefault() 阻止浏览器的默认行为。

addEventListener("eventType","handler","true!false");
removeEventListner("eventType","handler","true!false");

IE兼容模型与特性

三、IE模型

IE 模型同样提供了封装事件详细信息的 event 对象，但并未将其作为参数传入事件处理函数。由于任意时刻仅存在一个事件，IE 将其作为全局对象 window 的一个属性。IE 的事件传播模式对应于 DOM2 模型的目标阶段和冒泡阶段：首先执行目标元素的处理函数，然后向上传播至 document。IE 仅能捕获鼠标事件，而 DOM2 可捕获所有事件类型。此外，IE 中注册和删除事件处理函数的方法与 DOM2 不同。

事件处理函数的注册和删除通过元素的 attachEvent("eventType","handler") 和 detachEvent("eventType","handler") 方法实现。与 DOM2 不同，IE 中的 eventType 参数带有 on 前缀。

IE 模型的主要特点包括： 1、传播过程仅支持冒泡，不支持捕获。中断冒泡的方法为： window.ecent.cancelBubble=true; 2、Event 对象并非事件处理函数的参数，而是 window 的全局变量。 3、事件注册函数为 attachEvent()，反注册函数为 detachEvent()。

四、Netscape4事件模型

鉴于 Netscape 浏览器已基本停止开发，此处不作详细阐述。其核心机制可概括为：只进行事件捕获，不支持事件冒泡。

以上即为 JavaScript 基本事件模型的介绍，希望能为大家提供参考，也希望大家多多支持本站。