粥粥笔记（一）：DOM事件-原创手记-慕课网

    在网页中，我们的动作，例如鼠标滑过、点击都是事件。在浏览器中我们发生动作，随之产生事件流，也就是说点击一个按钮时浏览器会认为我们也点击了这个按钮所在的容器，甚至是整个页面（浏览器逐级接收事件），IE和Netscape对于事件流顺序的定义分别是事件冒泡流和事件捕获流。事件冒泡：从最具体的节点到最不具体的节点（也可以是文档，从发生动作的元素到其容器）；事件捕获：与事件冒泡相反，不太具体的元素节点应该更早接收事件。

事件处理程序：（前3种在IE浏览器中不可用，DOM0级和DOM2级可以为一个节点添加多个事件。）：
1、HTML事件处理程序（不建议使用，js和html代码耦合度太高不易于维护）：将事件添加在HTML结构中。
例：<input type="button" id="btn1" onclick="alert('hello world')"/>
2、DOM0级事件处理程序（跨浏览器优势）：采用将一个函数赋值给一个事件的处理程序属性。
例：

<input type="button" id="btn1" onclick="alert('hello world')"/> 
var btn = document.getElementById("btn1");

//事件是元素的属性(给按钮添加onclick属性,该属性又触发了一个事件处理程序)
btn.onclick=function(){
alert('hello world')
}
//清除该事件也是同样的方法
btn.onclick=null;
<script/>

   **3、DOM2级事件处理程序:DOM2级事件定义了两个方法**，分别是用于处理添加事件的方法addEventListener（type，hander，true/false），用于处理删除事件的方法removeListener（type，hander，true/false）。参数说明：type：添加的事件类型；hander:添加的事件发生时触发的操作（function（）{}）；布尔值：true为事件捕获流，false为事件冒泡流。

4、IE事件处理程序：IE事件也定义了两个方法，分别是用于处理添加事件的方法attachEvent（type，hander）和用于处理删除事件的方法detachEvent（type，hander）。ps:IE8及以上版本只支持事件冒泡流，所以此处不传布尔值。例：

<input type="button" id="btn1" onclick="alert('hello world')"/> 

var btn = document.getElementById("btn1");
btn.attachEvent('onclick',hander)
//清除该事件
btn.detachEvent('onclick,hander)
<script/>

5、在DOM2级事件处理中有两类方法分别是适用于非IE（3）和IE（4）的，所以要通过能力检测来解决跨浏览器的问题。通常使用将方法封装在对象中来实现。

 var eventUtil = {
//自定义一个有能力检测的一个添加函数
 addHandler:function(element,type,handler)
  {
     if(element.addEventListener)
            { 
element.addEventListener(type,handler,false);
           } // DOM2级事件处理程序
else if
         (element.attachEvent){element.attachEvent('on'+type,handler);
       } // IE事件处理程序
else
    {
       element['on'+type]=handler;
     } // DOM0级事件处理程序
}，
//同样定义一个可以能力检测的删除句柄
removeHandler:function(element,type,handler)
    {
        if(element.removeEventListener)     
             { 
                element.removeEventListener(type,handler,false);
              } // DOM2级事件处理程序
else if
            (element.detachEvent){
          element.detachEvent('on'+type,handler);
            } // IE事件处理程序
else
          {
           element['on'+type]=null;
         } //DOM0级事件处理程序
     }
}；

eventUtil.addHandler(btn，'click',showMessage);//调用对象的属性来实现给 btn添加一个click事件，事件发生后调用showMessage()函数

注意：DOM2级事件的两类方法参数中type的值不同，例：非IE中type="click",IE中type="onclick"。

在触发DOM上的事件时都会产生一个event事件对象，这个对象中包含了触发事件时的相关信息如事件类型，事件元素等。常用的属性有(非IE/IE)：type/type：事件类型；target/srcElement：事件目标（事件加在哪个节点上）；阻止事件冒泡的方法stopPropagation（）/cancleBubble()； 阻止默认行为的方法preventDefault()/returnValue()，例如a标签的默认跳转行为。

同样的，在事件对象的处理上也存在浏览器兼容问题，同样使用能力检测来解决，将它们都以属性的形式封装在一个eventUtil对象中：

var eventUtil = {
addEvent:function(){},
removeEvent:function(){},
getType:function(event){
return event.type;
   },
getElement:function(event){
return event.target || event.srcElement;
      }
getEvent:function(event){
return  event ? event : window.event
            },
stopPropagation:function(event){
if(event.stopPropagation)
     {
        event.stopPropagation()
       }
else
      {event.cancleBubble=true
          }
     },
preventDefault;function(event)
         {
             if(event.preventDefault)
                  {
                 event.preDefault()
                }
else
          {
returnValue=false;
    }
  }
}

以上是常用的DOM事件处理程序以及跨浏览器兼容性的处理方法