《十四》Javascript中的事件模型

事件模型:

原始事件模型（DOM0）、DOM2事件模型、IE事件模型

原始事件模型（DOM0）：不推荐使用

1. 注册事件：
   1. 将JS代码作为HTML的性质：<button id="demo" type="button" onclick="doSomeTing()" />
   2. 将事件处理函数作为JS对象的属性：document.getElementsById("demo").onclick = doSomeTing();
2. 解除事件：将null复制给事件处理函数。
   document.getElementById(“demo”).onclick = null;

优点：所有浏览器都兼容。
缺点：

1. 一个DOM对象只能注册一个类型的一个事件，如果注册了多个，则会发生覆盖，只执行最后一个事件。如：a.onclick = func1;；a.onclick = func2；将只会执行func2中的内容。
2. 没有事件流，事件一旦发生将马上进行处理，无法通过事件冒泡、事件委托等机制完成更多事情。

DOM2事件模型:

是W3C制定的标准模型，现代浏览器（IE6~8除外）都已经遵循这个规范。

W3C制定的事件模型中，一次事件的发生包含三个过程：事件捕获阶段、事件目标阶段、事件冒泡阶段。

1.事件捕获：当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。
2. 事件目标：当到达目标元素之后，执行目标元素的该事件相应的处理函数。
3. 事件冒泡：从目标元素开始，往顶层元素传播。途中如果有节点绑定了相同的事件处理函数，那些函数将会被一并触发。

所有的事件类型都会经历事件捕获，但是只有部分事件会经历事件冒泡阶段，例如submit事件就不会被冒泡。

1. 注册事件： addEventListener(“eventType”,“handler”,“true|false”);
   eventType是指事件类型，不加‘on’前缀。handler是处理函数。第三个参数用来指定是否在捕获阶段进行处理，一般为false。
2. 解除事件：removeEventListner(“eventType”,“handler”,“true|false”);

IE事件模型：

IE的事件模型只有两步，先执行元素的监听函数，然后事件沿着父节点一直冒泡到document。

1. 注册事件：attachEvent( “eventType”,“handler”)，其中evetType为事件的类型要加’on’。
2. 解除事件:：detachEvent(“eventType”,“handler” )

IE的事件模型已经可以解决原始事件模型的缺点，但其自己的缺点就是兼容性，只有IE系列浏览器才可以使用。

//兼容所有浏览器：
var demo = document.getElementById('demo');
if(demo.attachEvent){
　　demo.attachEvent('onclick',func);
}else{
　　demo.addEventListener('click',func,false);
}