浅析JavaScript事件机制——事件模型

在各种浏览器中存在三种事件模型:原始事件模型,DOM2事件模型,IE事件模型.其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE以外的所有主流浏览器支持.下面我们将这三种事件模型进行一个简单的了解。

一：原始事件模型

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

　　1.html代码中指定属性：

<input type="button" onclick="func1()"/>

　　2.在JavaScript代码中指定属性：

  document.getElementsByTagName('input')[0].onclick = func1;
  function func1(){
    //do sth
  }

　　让我们看看这样的优缺点：

　　优点：所以浏览器都兼容。

　　缺点：1.相同事件的监听函数只能绑定一个，后绑定的会覆盖掉前面的，如：a.onclick = func1; a.onclick = func2;将只会执行func2中的内容。

　　　　　2.无法通过事件的冒泡、委托等机制（后面系列会讲到）完成更多事情。

　　在一些简单应用中时，用这样的方式也可以，速度也比较快。但是，如果在较为复杂的模型中时，显然用这个方式就比较麻烦了。

二：DOM2事件模型

　　此模型是W3C制定的标准模型，W3C制定的事件模型中，一次事件的发生包含三个过程：

　　(1)capturing phase:事件捕获阶段，事件被从document一直向下传播到目标元素,在这过程中如果有哪个祖先元素对该事件感兴趣可以注册自己的处理函数. 
　　(2)target phase:事件处理阶段，事件到达目标元素,执行目标元素的事件处理函数. 
　　(3)bubbling phase:事件冒泡阶段，事件从目标元素上升一直到达document,虽然所有的事件类型都会经历captruing phase阶段但是只有部分事件会经历bubbling phase阶段,例如　　　submit事件就不会被上浮. 

　　所有的事件类型都会经历captruing phase但是只有部分事件会经历bubbling phase阶段,例如submit事件就不会被冒泡。 
　　在整个的事件传播过程中可以调用event.stopPropagation()来停止事件的传播,调用preventDefault()来阻止浏览器的默认行为.

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

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

三：IE事件模型

　　E模型也提供了一个event对象封装了事件的详细信息,但是IE不把该对象传入事件处理函数,由于在任意时刻只会存在一个事件,所以IE把它作为全局对象window的一个属性,IE中的事件传播模式对应于DOM2的第二和第三阶段,首先执目标元素的处理函数,然后向上传播到达document,ie中只能能捕捉鼠标事件,而DOM2中可以捕捉所有的事件,IE中注册和删除事件处理函数的方法也不同于DOM2.

　　事件处理函数的注册和删除是通过元素的attachEvent( "eventType","handler") and detachEvent("eventType","handler" ),与dom2不同的是eventType有on前缀。

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

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

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

　　也许，这样写我们会觉得有那么点麻烦，所以，我们通常借助一些框架或类库已经封装好的，比如jquery，在jquery中，具有强大的事件监听方式。