详解JavaScript中的事件流和事件处理程序
事件流:分两种,IE的是事件冒泡流,事件开始时从最具体的元素接收,逐级向上传播到较为不具体的节点(Element->Document)。与之相反的是Netscape的事件捕获流。
DOM2级事件规定事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。
大多数情况下都是将事件处理程序添加到事件流的冒泡阶段。一个EventUtil的栗子:
varEventUtil={ addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }elseif(element.attachEvent){ element.attachEvent('on'+type,handler);//IE8 }else{ element['on'+type]=handler; } }, removeHandler:function(){...} }
下面我们详细来看:
DOM0级事件处理程序
通过Javascript指定事件处理程序的传统方式,就是将一个函数赋值给一个事件处理程序属性。
每个元素都有自己的事件处理程序属性,这些属性通常全部小写,例如onclick。将这种属性的值设置为一个函数,就可以指定事件处理程序。
varbtn=document.getElementById('myBtn'); //添加事件处理程序 btn.onclick=function(){ alert(this);//为DOM元素btn }; //移除事件处理程序 btn.onclick=null;
优点:1.简单2.具有跨浏览器的优势
缺点:在代码运行之前不会指定事件处理程序,因此这些代码在页面中位于按钮后面,就有可能在一段时间怎么点击都没反应,用户体验变差。
DOM2级事件处理程序
定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()。三个参数,1.要处理的事件名。2.作为事件处理程序的函数3.一个布尔值。最后这个布尔值为true,表示在捕获阶段调用事件处理程序,false表示在冒泡阶段调用事件处理程序。
//添加多个事件处理程序 varbtn=document.getElementById('myBtn'); btn.addEventListener('click',function(){ alert(this);//为DOM元素btn },false); btn.addEventListener('click',function(){ alert('HelloWorld'); },false); //移除事件处理程序 btn.removeEventListener('click',function(){ //匿名函数无法被移除,移除失败 },false); //改写 varhandler=function(){ alert(this.id); }; btn.addEventListener('click',handler,false); //再次移除事件处理程序 btn.removeEventListener('click',handler,false);//移除成功
这两个事件处理程序会按照添加他们的顺序触发。大多数情况,都是将事件处理程序添加到事件流的冒泡阶段,这样可以最大限度的兼容各种版本的浏览器。
优点:一个元素可以添加多个事件处理程序
缺点:IE8及以下浏览器不支持DOM2级事件处理程序。(包括IE8)
IE事件处理程序
定义了两个方法,与上类似:attachEvent(),detachEvent()。这两个方法接收相同的两个参数:事件处理程序名称和事件处理程序函数。由于IE8以及更早版本的浏览器只支持事件冒泡,所以通过detachEvent()添加的事件处理程序会被添加到冒泡阶段。
varbtn=document.getElementById('myBtn'); btn.attachEvent('onclick',function(){ alert(this);//window }); btn.attachEvent('onclick',funciton(){ alert("HELLO,WORLD"); });
点击按钮,这两个事件处理程序的触发顺序与上述刚好相反。不是按照添加事件处理程序的顺序触发,刚好相反。
优点:一个元素可以添加多个事件处理程序
缺点:只支持IE。
跨浏览器的事件处理程序
eg:
varEventUtil={ addHandler:function(ele,type,handler){ if(ele.addEventListener){ ele.addEventListener(type,handler,false); }elseif(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); }elseif(ele.detachEvent){ ele.detachEvent('on'+type,handler); }else{ ele['on'+type]=null; } } }