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

1、详解JavaScript中的大事流和大事处理程序_ 大事流：分两种，IE的是 大事冒泡流 ，大事开头时从最具体的元素接收，逐级向上传播到较为不具体的节点（Element - Document）。与之相反的是 Netscape 的 大事捕获流 。 DOM2级大事规定大事流包括三个阶段：大事捕获阶段、处于目标阶段和大事冒泡阶段。 大多数状况下都是将大事处理程序添加到大事流的冒泡阶段。一个 EventUtil 的栗子： var EventUtil = addHandler: function(element, type, handler) if(element.addEventListener) e

2、lement.addEventListener(type, handler, false); else if(element.attachEvent) element.attachEvent(on + type, handler); / IE8 else elementon + type = handler; , removeHandler: function(). 下面我们具体来看： DOM0级大事处理程序 通过Javascript指定大事处理程序的传统方式，就是将一个函数赋值给一个大事处理程序属性。 每个元素都有自己的大事处理程序属性，这些属性通常全部小写，例如onclick。将这种属性的

3、值设置为一个函数，就可以指定大事处理程序。 var btn = document.getElementById(myBtn); / 添加大事处理程序 btn.onclick = function () alert( this );/为DOM元素btn ; / 移除大事处理程序 btn.onclick = null; 优点:1.简洁2.具有跨扫瞄器的优势 缺点:在代码运行之前不会指定大事处理程序，因此这些代码在页面中位于按钮后面，就有可能在一段时间怎么点击都没反应，用户体验变差。 DOM2级大事处理程序 定义了两个方法，用于处理指定和删除大事处理程序的操作:addEventListener()和

4、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); ,f

5、alse); / 移除大事处理程序 btn.removeEventListener(click,function () / 匿名函数无法被移除,移除失败 ,false); / 改写 var handler = function () alert(this.id); ; btn.addEventListener(click,handler,false); / 再次移除大事处理程序 btn.removeEventListener(click,handler,false);/ 移除胜利 这两个大事处理程序会根据添加他们的挨次触发。大多数状况，都是将大事处理程序添加到大事流的冒泡阶段，这样可以最大限度

6、的兼容各种版本的扫瞄器。 优点: 一个元素可以添加多个大事处理程序 缺点: IE8及以下扫瞄器不支持DOM2级大事处理程序。(包括IE8) IE大事处理程序 定义了两个方法，与上类似:attachEvent(),detachEvent()。这两个方法接收相同的两个参数:大事处理程序名称和大事处理程序函数。由于IE8以及更早版本的扫瞄器只支持大事冒泡，所以通过detachEvent()添加的大事处理程序会被添加到冒泡阶段。 var btn = document.getElementById(myBtn); btn.attachEvent(onclick, function() alert( th

7、is );/ 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 eleon + type = handler , removeHandler: function ( ele, type, handler ) if ( ele.removeEventListener ) ele.removeEventListener