JS中DOM0,DOM2,DOM3级事件模型解析

声明：本文来源于http://www.webzsky.com/?p=731
我只是在这里作为自己的学习笔记整理一下（原文格式看的我眼睛疼）

javascript中的事件

javascript程序使用的是事件驱动的设计模式，为一个元素添加事件监听函数，当这个元素的相应事件被触发那么其添加的事件监听函数就被调用：事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互; 所有浏览器都支持DOM0级事件处理程序，且使用该方式时，事件处理程序是在元素的作用域中运行，因此程序中的this都是指向元素。

如何理解DOM0,DOM2,DOM3

文档对象模型是一种与编程语言及平台无关的API(Application programming Interface)，借助于它，程序能够动态地访问和修改文档内容、结构或显示样式。
W3C协会早在1988年就开始了DOM标准的制定，W3C DOM标准可以分为DOM1,DOM2,DOM3三个版本。

DOM1级

主要定义的是HTML和XML文档的底层结构。DOM2和DOM3级别则在这个结构的基础上引入了更多的交互能力，也支持了更高级的XML特性。为此DOM2和DOM3级分为许多模块（模块之间具有某种关联），分别描述了DOM的某个非常具体的子集。

这些模块如下：

1. DOM2级核心（DOM Level 2 Core）：在1级核心的基础上构建，为节点添加了更多方法和属性；
2. DOM2级视图（DOM Level 2 Views）：为文档定义了基于样式信息的不同视图；
3. DOM2级事件（DOM Level 2 Style）：定义了如何以编程方式来访问和改变CSS样式信息；
4. DOM2级遍历和范围（DOM Level 2 Traversal and Range）：引入了遍历DOM文档和选择其特定部分的新接口。
5. DOM2级HTML（DOM Level 2 HTML）：在1级HTML基础上构建，添加了更多属性、方法和新接口。
6. DOM3级又增加了XPath模块和加载与保存（Load and Save）模块。
   DOM2级和3级的目的在于扩展DOM API，以满足操作XML的所有需求，同时提供更好的错误处理及特性检测能力。 DOM0就是直接通过 onclick写在html里面的事件; DOM2是通过addEventListener绑定的事件, 还有IE下的DOM2事件通过attachEvent绑定; DOM3是一些新的事件。

0级DOM:

一开始浏览器处理事件的时候只有原始事件模型，事件处理程序被设置为js代码串作为html的性质值，例如：

在js中html元素都有一个对应的对象，这个对象的属性对应那个html元素的性质，所以可以用js代码添加事件监听函数
document.getElementById("myButton").onclick = function () {alert('thanks');}
通常情况下事件监听函数如果返回一个值并且是false，则会阻止浏览器执行默认的动作。无论用html还是js，都是把一个函数赋值给文档元素，在事件监听函数被调用时候它是作为产生事件的元素的放法调用的，所以this引用的是那个目标元素(例子中的Input对象)。从技术上来说，W3C的DOM标准并不支持上述最原始的添加事件监听函数的方式，这些都是在DOM标准形成前的事件模型。尽管没有正式的W3C标准，但这种事件模型仍然得到广泛应用，这就是我们通常所说的0级DOM。

2级DOM

DOM级别1于1998年10月1日成为W3C推荐标准。1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。在2级DOM中除了定义了一些DOM相关的操作之外还定义了一个事件模型 ，这个标准下的事件模型就是我们所说的2级DOM事件模型2级DOM的事件传播在2级DOM中，当事件发生在节点时，目标元素的事件处理函数就被触发，而且目标的每个祖先节点也有机会处理那个事件。

因为2级DOM的事件传播分三个阶段进行。

1.capturing阶段，事件从Document对象沿着文档树向下传播给节点。如果目标的任何一个祖先专门注册了事件监听函数，那么在事件传播的过程中就会运行这些函数。
2.下一个阶段发生在目标节点自身，直接注册在目标上的适合的事件监听函数将运行。
3.是bubbling阶段，这个阶段事件将从目标元素向上传播回Document对象（与capturing相反的阶段）。虽然所有事件都受capturing阶段的支配，但并不是所有类型的事件都bubbling。（0级DOM事件模型处理没有capturing阶段）

事件对象

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。包括事件的元素、事件的类型，以及其他与特定事件相关的信息。例如，鼠标操作事件，包含鼠标的位置信息，键盘操作事件包含按下的键的信息。所有浏览器都支持event对象，但支持方式不同。
[IE的事件流是冒泡 从里面往上面冒, netscape是从外部元素往内部元素捕获; 而DOM2级的事件规定了事件流包含三个阶段包括：1：事件捕获 2：处于目标阶段 3：事件冒泡阶段 （IE8以及更早版本不支持DOM事件流）; 无论在DOM0还是DOM2还是DOM3中都会在事件函数中传入事件对象;