DOM事件处理程序

   事件就是用户或浏览器自身执行的某种动作。比如“click”，“load”，“mouseover”等都是事件的名字。响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以“on”开头，因此，click对应的时间处理程序就是 “onclick”。给事件指定事件处理程序有好几种方式。

  一：HTML 方式

  这种方式是利用元素的属性，直接添加事件处理程序，像下面给这样：

     

<input  type= "button" id="btn" value=" click me!" onclick = "alert('clicked')"></input>

onclick值也可以使事先定义的函数名字，像下面这样：

<script type="text/javascript">function showMessage(){       alert("clicked");   }</script> <input  type= "button" id="btn" value=" click me!" onclick = "showMessage()"/ >

这种方式有3个不足： 1 ，存在时差问题，上面第二种方式，如果函数定义在按钮下面，页面底部定义的，如果用户在页面解析shoumessage函数之前单击按钮，就会引发错误。

                                       2，存在兼容性问题，不同的JavaScript引擎遵循的标识符解析规则略有差异。

                                      3，html和JavaScript耦合度太高，如果想要修改事件处理程序，就要同时修改html代码和JavaScript代码。

基于以上原因，我们通常不使用HTML方式的事件处理程序，而是采用DOM事件处理程序

二： DOM事件处理程序

    随着js的发展，dom事件处理程序目前分为两个阶段的不同。而因为浏览器的不同，又有不同。最终，目前处理事件处理程序有DOM0级方式，DOM2级方式，和IE处理方式。

  1，DOM0级处理方式：

       DOM0级事件处理方式，首先获得一个元素的引用，因为每个元素都有事件处理程序属性，所以，第二步给元素的事件处理程序属性的值设置为一个函数即可。

 像下面这样：

<input  type= "button" id="btn" value=" click me!" / >   <script type="text/javascript">      var btn = document.getElementById("btn");   btn.onclick = function(){   alert("dom0 级事件处理程序");   }   </script>

也可以删除事件处理程序，只要想下面这样设置

btn.onclick = null;

2，DOM2级事件处理程序方式：

DOM2级为事件处理程序定义了两个方法：addEventLister 和removeEventLister 用于添加和删除事件处理程序。addEventLister|和RemoveEventLister接受三个参数，事件名字，事件处理程序，布尔值（为true代表捕获阶段，false代表冒泡阶段）。事件移除程序也接受三个参数，事件名字，事件处理程序，布尔值，因为事件移除的程序要和添加的一样，所以事件移除的事件处理程序不要使用匿名函数，否则无法移除。可以像下面这样使用DOM2级事件处理程序：

<script type="text/javascript">      function showMessage(){       alert("clicked");      }</script>   <p> 事件处理程序</p>   <input  type= "button" id="btn" value=" click me!" / >   <script type="text/javascript">      var btn = document.getElementById("btn");   btn.onclick = function(){   alert("dom0 级事件处理程序");   }   btn.onclick = null ;   btn.addEventListener("click",showMessage ,false);   btn.removeEventListener("click",showMessage,false);   </script>

3 ，IE事件处理程序方式：

  IE实现了与DOM2级中类似的两个方法，attachEvent和detachEvent用于添加和移除事件处理程序。这两个方法接受相同的两个参数，因为IE8及以前只支持事件冒泡，所以事件均在冒泡阶段执行。

    ie时间处理程序和dom的事件处理程序还有一点不一样在于：作用域的不同，dom中的作用域是元素本身，而ie则是全局作用域。即处理程序中的this 为window 。

可以像下面这样使用ie处理程序：

<script type="text/javascript">      function showMessage(){       alert("clicked");      }</script>   <p> 事件处理程序</p>   <input  type= "button" id="btn" value=" click me!" / >   <script type="text/javascript">      var btn = document.getElementById("btn");   btn.onclick = function(){   alert("dom0 级事件处理程序");   }   btn.onclick = null ;   btn.attachEvent("click",showMessage ,false);   btn.detachEvent("click",showMessage,false);   </script>

目前的时间处理方式就是这些了，最后我们给出个跨浏览器的时间处理程序 addHandler() ，这个方法属于EventUtil的对象，addHandler() 接受三个参数，元素，时间名字，事件处理程序。

     定义和使用见下面：

  EventUtil = {
    addHandler:function(element,type,handler){
    if(element.addEventListener){
    element.addEventListener(type,handler,false);
    } else if( element.attachEvent){
    element.attachEvent("on" + type ,handler);
    } else{
    element["on" + type] = handler ;
    }
    },
    removeHandler:function(element ,type,handler){
    if(element.removeEventListener){
    element.removeEventListener(type,handler,false);
    } else if( element.detachEvent){
    element.detachEvent("on" + type ,handler);
    } else{
    element["on" + type] = null ;
    }
    }
    }
   EventUtil.addHandler(btn,"click",showMessage);