事件处理程序

 HTML事件处理程序

这种是通过指定onclick特性并将一些JavaScript代码作为它的值来定义的。由于这个值是JavaScript，因此不能在其中使用未经转义的HTML语法字符，例如和号(&)、双引号("")、小于号（<）或大于号（>）,为了避免使用HTML实体，这里使用单引号，如果想要使用双引号，就需要使用转义。

这样指定事件处理程序会创建一个封装着元素属性值的函数，这个函数中有一个局部变量event，就是事件对象。通过event变量，可以直接访问事件对象，在这个函数内部，this值等于事件的目标元素。

<input type="button" value="Click Me" onclick="alert('click')"/>
<input type="button" value="Click Me" onclick="alert(&quot;click&quot;)"/>
<input type="button" value="Click Me" onclick="alert(event.type)"/>
<input type="button" value="Click Me" onclick="alert(this.value)"/>
<input type="button" value="Click Me" onclick="alert(value)"/>

在HTML中定义的事件处理程序可以包含要执行的具体动作，也可以调用在页面其他地方定义的脚本。

<input type="button" value="Click Me" onclick="showMessage()"/>
<script>
     function showMessage(){
        alert("Hello word!");
     }
</script>

使用这种方式的时候，假设showMessage()函数是在按钮下方、页面的最底部定义的，如果用户在页面解析showMessage()函数之前就单击了按钮，就会引发错误。另外HTML和JavaScript代码紧密耦合，如果要更换事件处理程序，就需要同时更改HTML代码和JavaScript代码，因此，现在很多人都不再使用这种方法。

DOM0级事件处理程序

通过JavaScript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。每个元素都有自己的事件处理程序属性，这些属性通常全部小写，例如onclick，将这种属性的值设置为一个函数，就可以指定事件处理程序。

使用DOM0级方法指定的事件处理程序被认为是元素的方法，因此，这个时候的事件处理程序是在元素的作用域中运行的，程序中的this引用当前元素,可以在事件处理程序中通过this访问元素的任何属性和方法。以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。需要注意的是，DOM0级对每个事件只支持一个事件处理程序。

<input type="button" value="Click Me" id="inp"/>
<script>
     var btn = document.getElementById('inp');
     btn.onclick = function(){
         alert ("Click");
         alert(this.id);    //inp
         alert(this.type);  //button
     };
</script>

也可以删除通过DOM0级方法指定的事件处理程序，只要像下面这样将事件处理程序属性的值设为null即可。

btn.onclick = null;

DOM2级事件处理程序

DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点中都包含着两个方法，并且它们接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值，最后的布尔值如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

当使用addEventListener()方法为一个元素添加多个事件处理程序时，多个事件是按照添加的顺序被触发执行的。

<input type="button" value="Click Me" id="DOM2">
<script>
    var DOM2 = document.getElementById("DOM2");
    DOM2.addEventListener("click",function(){
         alert(this.value);   //Click Me
    },false);
    DOM2.addEventListener("click",function(){
         alert(this.type);    //button
    },false);
</script>

通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除，移除时传入的参数与添加处理程序使用的参数相同，这意味着上面通过addEventListener()添加的匿名函数将无法移除。只能移除下面的事件处理程序。

<script>
    var DOM2 = document.getElementById("DOM2");
    var handler = function(){
        alert(this.id);
    };
    DOM2.addEventListener("click",handler,flase);
    DOM2.removeEventListener("click",handler,flase);
</script>

  IE事件处理程序

IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent(),这两个方法接受相同的两个参数：事件处理程序名称与事件处理程序函数。由于IE8及更早版本只支持事件冒泡，所有通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。

IE中attachEvent()与DOM0级方法的主要区别在于事件处理程序的作用域。在使用DOM0级方法的情况下，事件处理程序会在其所属元素的作用域内运行；在使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此this等于window。另外，当使用attachEvent()方法为一个元素添加多个事件处理程序时，多个事件是按照添加顺序的相反顺序被触发执行的。

<input type="button" value="Click Me" id="IE1">
<script>
    var IE1 = document.getElementById("IE1");
    IE1.attachEvent("onclick",function(){
         alert("click");
    })
    IE1.attachEvent("onclick",function(){
         alert(this === window);
    })
</script>

使用attachEvent()添加的事件可以通过detachEvent()来移除，条件是必须提供相同的参数，同DOM方法一样，添加的匿名函数将不能被移除。

<script>
    var IEclick = function(){
         alert("Click");
    }
    IE1.attachEvent("onclick",IEclick);
    IE1.detachEvent("onclick",IEclick);
</script>

跨浏览器的事件处理程序

要保证处理事情的代码能在大多数浏览器下一致地运行，只需要关注冒泡阶段。

第一个要创建的方法是addHandel()，它的职责是视情况分别使用DOM0级方法、DOM2级方法或IE方法来添加事件，这个方式属于一个名叫EventUtil的对象，它接受三个参数：要操作的元素程序、事件名称和事件处理程序函数。
与addHandler()对应的方法是removeHandler()，它也接受相同的参数，用于移除之前添加的事件处理程序——无论该事件处理程序是采用什么方式添加的。
EventUtil的用法如下：

var 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对象：

<input type="button" value="Click Me" id="all">
<script>
    var all = document.getElementById("all");
    var allClick = function(){
        alert("Click");
    }
    EventUtil.addHandler(all,"click",'allClick');
    EventUtil.removeHandler(all,"click",'allClick');
</script>