三种事件模型

原地址盘点JavaScript中的事件及事件的三种模型 - 知乎 (zhihu.com)

事件的三种模型

3.1 原始事件模型（DOM0级）

在原始事件模型中，事件发生后没有传播的概念，没有事件流。事件发生，马上处理。监听函数只是元素的一个属性值，通过指定元素的属性值来绑定监听器。书写方式有两种：

1. HTML代码中指定属性值：

1. 在js代码中指定属性值：

document.getElementsByTagName(‘input’)[0].onclick = func1

优点：所有浏览器都兼容

缺点：

• 逻辑与显示没有分离；
• 相同事件的监听函数只能绑定一个，后绑定的会覆盖掉前面的，如：a.onclick = func1; a.onclick = func2;将只会执行func2中的内容;
• 无法通过事件的冒泡、委托等机制完成更多事情;

3.2 IE事件模型

“IE不把该对象传入事件处理函数，由于在任意时刻只会存在一个事件，所以IE把它作为全局对象window的一个属性”，用IE8执行了代码alert(window.event)，结果弹出是null，说明该属性已经定义，只是值为null（与undefined不同），代码如下;

window.onload = function (){alert(window.event);}


setTimeout(function(){alert(window.event);}，2000);

第一次弹出【object event】，两秒后弹出依然是null。由此可见IE是将event对象在处理函数中设为window的属性，一旦函数执行结束，便被置为null了;

IE的事件模型只有两步:

1. 先执行元素的监听函数，
2. 然后事件沿着父节点一直冒泡到document。

IE模型下的事件监听方式比较独特，绑定监听函数的方法是：

attachEvent( "eventType"，"handler");//其中evetType为事件的类型，

如onclick，注意要加’on’。解除事件监听器的方法是:

detachEvent("eventType"，"handler" )

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

3.2 DOM2事件模型

此模型是W3C制定的标准模型，既然是标准，现代浏览器（指IE6~8除外的浏览器）都已经遵循这个规范。W3C制定的事件模型中，一次事件的发生包含三个过程：

1. capturing phase:事件捕获阶段。事件被从document一直向下传播到目标元素，在这过程中依次检查经过的节点是否注册了该事件的监听函数，若有则执行;
2. target phase:事件处理阶段。事件到达目标元素，执行目标元素的事件处理函数;
3. bubbling phase:事件冒泡阶段。事件从目标元素上升一直到达document，同样依次检查经过的节点是否注册了该事件的监听函数，有则执行;

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

标准的事件监听器绑定：

addEventListener("eventType"，"handler"，"true|false");

其中eventType指事件类型。第二个参数是处理函数，第三个即用来指定是否在捕获阶段进行处理，一般设为false来与IE保持一致。

监听器的解除也类似：

removeEventListner("eventType"，"handler"，"true!false");

以上便是事件的三种模型，我们在开发的时候需要兼顾IE与非IE浏览器，所以注册一个监听器应该这样写：

var a = document.getElementById('a');
if(a.attachEvent){
    a.attachEvent('onclick'，func);
}
else{
    a.addEventListener('click'，func，false);
}