0级DOM事件模型和2级DOM事件模型

前言：今天看到有关JavaScript中的事件模型，决定深入的了解下，下面的内容全部围绕标题展开。

---

一. 疑惑

如果是第一次看到事件模型这块，一定会有个疑虑，为什么是0级和2级，1级在哪里？其实，实际上并没有0级DOM这个标准，它是大家对最原始的DOM模型的叫法，里面有最原始的事件模型，在1级DOM标准中并没有规定事件模型，2级DOM里面规定了事件模型。

二. 0级DOM事件模型

（1）方式一

<button id="btn" onclick="showmess()">点我</button>

<script>
    function showmess(){
        alert("我是button");
    }
</script>

（2）方式二

<button id="btn">点我</button>
<script>
    document.getElementById("btn").onclick = function(){
        alert("我是button");
    }
</script>

可以看出0级DOM事件模型，的事件注册有两种方法，第一种是直接利用HTML的属性来直接注册；第二种是用JS函数获得元素对象，再注册。

三. 2级DOM事件模型

2级DOM事件模型，是标准的事件模型，注册方式如下：

<button id="btn">点我</button>
<script>
var target = document.getElementById("btn");
target.addEventListener('click',function(){
        alert("我是button");
}, true);

</script>

在2级DOM事件模型中，使用addEventListener函数为元素注册事件，该函数有三个参数，第一个是事件的类型，第二个是处理函数，第三个参数为boolean值，为true表示事件监听处理在捕捉阶段，为false表示事件监听处理在目标阶段和冒泡阶段。与之对应的还有个removeEventListener()方法，该方法是移除事件监听，参数与addEventListener()相同。

三. 两者的区别
（1）由上面的内容可以看出两者的事件注册方式不同；

（2）在0级DOM事件模型中，函数是元素的事件句柄，所以this应用的就是发生事件的元素；在2级DOM中，由于事件被分为三个执行阶段，所以this并没有明确的指向，应使用event对象的currentTarget属性，它指向的是注册该事件的元素；

（3）0级DOM事件模型只对事件的类型进行分类，例如：鼠标事件和键盘事件；2级DOM事件模型是模块化的，分为HTMLEvents，MouseEvents，和UIEvents三个模块，分别实现不同的接口；

（4）最主要的区别，在0级DOM中事件模型中，浏览器把事件分发给元素，如果有合适的事件就触发；在2级DOM事件模型中，事件被分为三个阶段，捕获阶段->目标阶段->冒泡阶段。