DOM事件

一、事件流

　　事件流描述的是从页面中接收事件的顺序。

　　1.事件冒泡

　　　　即开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档）。

　　2.事件捕获

　　　　不太具体的点应该早接收事件，而最具体的节点应该最后接收到事件。

   　3.DOM事件流：包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。//IE9 Opera Firefox Chrome Safari都支持DOM事件流；IE8及更早版本不支持DOM事件流。

 二、事件处理程序

//HTML事件处理程序
<p id="para" title="cssrain demo!" onclick="test()" >test</p> 
<script> 
　　function test(){ 
　　　　alert("test"); 
　　} 
</script> 

　　

<p id="para" title="cssrain demo!">test</p> 
<script> 
　　function test(){ 
　　　　alert("test"); 
　　} 

　　function pig(){ 
　　　　alert("pig"); 
　　} 

　　window.onload = function(){ 
　　　　document.getElementById("para").onclick = test; 
　　　　document.getElementById("para").onclick = pig; 
　　} 
</script> 
//如果按照上面的写法，我们只能输出第二个函数，此种方法无法在同一事件绑定多个函数
//可以用addEventListener()  attachEvent()方法实现此功能

　　

//element是元素对象，type是事件类型，handle是函数对象（不是函数名字）
//兼容的事件处理程序
var EventUtil={
  addHandle:function(element,type,handle){
    if(element.addEventListener){
      element.addEventListener(type,handle,false);　　//适用于IE9 firfox safari chrome opera
    }else if(element.attachEvent){
        element.attachEvent("on"+type,handle);　　　　//适用于IE和Opera
      }else{
        element["on"+type]=handle;
      }
    },
    removeHandle:function(element,type,handle){
      if(element.addEventListener){
        element.removeEventListener(type,handle,false);
      }else if(element.attachEvent){
        element.detachEvent("on"+type,handle);
      }else{
        element["on"+type]=handle;
      }
    }
}