详解JavaScript中的事件流和事件处理程序

事件流：分两种，IE的是事件冒泡流，事件开始时从最具体的元素接收，逐级向上传播到较为不具体的节点（Element -> Document）。与之相反的是 Netscape 的事件捕获流。
DOM2级事件规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。
大多数情况下都是将事件处理程序添加到事件流的冒泡阶段。一个 EventUtil 的栗子：

var EventUtil = {addHandler: function（element, type, handler）{if（element.addEventListener）{element.addEventListener（type, handler, false）;}else if（element.attachEvent）{element.attachEvent（"on" + type, handler）; // IE8}else{element["on" + type] = handler;}},removeHandler: function（）{...}}

下面我们详细来看：
DOM0级事件处理程序
通过Javascript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。
每个元素都有自己的事件处理程序属性，这些属性通常全部小写，例如onclick。将这种属性的值设置为一个函数，就可以指定事件处理程序。

var btn = document.getElementById（"myBtn"）;// 添加事件处理程序btn.onclick = function （） {alert（ this ）;//为DOM元素btn};// 移除事件处理程序btn.onclick = null;

优点:1.简单2.具有跨浏览器的优势
缺点:在代码运行之前不会指定事件处理程序，因此这些代码在页面中位于按钮后面，就有可能在一段时间怎么点击都没反应，用户体验变差。
DOM2级事件处理程序
定义了两个方法，用于处理指定和删除事件处理程序的操作:addEventListener（）和removeEventListener（）。三个参数，1.要处理的事件名。2.作为事件处理程序的函数3.一个布尔值。最后这个布尔值为true,表示在捕获阶段调用事件处理程序，false表示在冒泡阶段调用事件处理程序。

// 添加多个事件处理程序var btn = document.getElementById（"myBtn"）;btn.addEventListener（"click",function （）{alert（ this ）;// 为DOM元素btn},false ）;btn.addEventListener（"click",function （） {alert（"Hello World"）;},false）;// 移除事件处理程序btn.removeEventListener（"click",function （） {// 匿名函数无法被移除,移除失败},false）;// 改写var handler = function （） {alert（this.id）;};btn.addEventListener（"click",handler,false）;// 再次移除事件处理程序btn.removeEventListener（"click",handler,false）;// 移除成功

这两个事件处理程序会按照添加他们的顺序触发。大多数情况，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度的兼容各种版本的浏览器。
优点: 一个元素可以添加多个事件处理程序
缺点: IE8及以下浏览器不支持DOM2级事件处理程序。（包括IE8）
IE事件处理程序
定义了两个方法，与上类似:attachEvent（）,detachEvent（）。这两个方法接收相同的两个参数:事件处理程序名称和事件处理程序函数。由于IE8以及更早版本的浏览器只支持事件冒泡，所以通过detachEvent（）添加的事件处理程序会被添加到冒泡阶段。

var btn = document.getElementById（"myBtn"）;btn.attachEvent（"onclick", function（）{alert（ this ）;// window}）;btn.attachEvent（"onclick", funciton（）{alert（"HELLO, WORLD"）;}）;

点击按钮，这两个事件处理程序的触发顺序与上述刚好相反。不是按照添加事件处理程序的顺序触发，刚好相反。
优点:一个元素可以添加多个事件处理程序
缺点:只支持IE。
跨浏览器的事件处理程序

eg:

var EventUtil = {addHandler : function （ ele, type, handler ） {if （ ele.addEventListener ） {ele.addEventListener（ type, handler, false ）;} else if （ ele.attachEvent ） {ele.attachEvent（ "on" + type, handler ）;} else {ele["on" + type] = handler}},removeHandler: function （ ele, type, handler ） {if （ ele.removeEventListener ） {ele.removeEventListener（ type, handler, false ）;} else if （ ele.detachEvent ） {ele.detachEvent（ "on" + type, handler ）;} else {ele[ "on" + type ] = null;}}}