前言

响应某个事件的函数就叫做事件处理程序。 事件处理程序的名字以“on”开头。 为事件指定处理程序有好几种。

HTML事件处理程序

某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值应该是能够执行的javascript代码。

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

2.由于特性的值是javascript，因此不能在其中使用未经转义的HTML语法字符。

3.在HTML中定义的事件处理程序可以包含要执行的具体动作，也可以调用在页面其他地方定义的脚本。事件处理程序中的代码在执行时，有权访问全局作用域中的任何代码。

<input type="button" value="click me" onclick="showmessage()"/>

4.这样会创建一个封装着元素属性值的函数，这个函数中有一个局部变量event，也就是事件对象，通过它可以直接访问事件对象，还有一个this值，等于事件的目标元素。

5.对于这个动态创建的函数，在它内部，可以像访问局部变量一样访问document及该元素本身的成员。如果当前元素是一个表单输入元素，则作用域中还会包含访问表单元素（父元素）的入口。

function(){
    with(document){
        with(this.form){
            with(this){
                //元素属性值
            }
        }
    }
}

这样扩展作用域的方式，无非就是想让事件处理程序无需引用表单元素就能访问其他表单字段。

6.缺点：

时差问题：用户可能会在HTML元素一出现在页面上就触发相应的事件，但当时的事件处理程序有可能尚不具备执行条件。

解决办法：

<input type="button" value="click me" onclick="try{showmessage();}catch(ex){}">

这样扩展事件处理程序的作用域链在不同浏览器中会导致不同结果。

HTML代码与javascript代码紧密耦合，如果要更换事件处理程序，就要改动这两个地方。

DOM0级事件处理程序

通过javascript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。

每个元素（包括window和document）都有自己的事件处理程序属性，这些属性通常全部小写。

var btn=document.getElementById("mybtn");
btn.onclick=function(){
    alert(this.id);//mybtn
};

注意：如果这段代码位于按钮后面，就有可能在一段时间内怎么单击都没有反应。

这种方法被认为是元素的方法。因此这时候的事件处理程序是在元素的作用域中运行=》this引用当前元素 这种事件处理程序会在冒泡阶段被处理。 删除：btn.onclick=null; 缺点：对每个事件只支持一个事件处理程序

DOM2级事件处理程序

处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。

所有DOM节点中都包含这2个方法。 都接受3个参数：

要处理的事件名 作为事件处理程序的函数 布尔值（true表示在捕获阶段调用事件处理程序） 好处：可以添加多个事件处理程序。

通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除，传入的参数也必须相同。

var handler=function(){
  alert(this.id);  
};
btn.addEventListener("click",handler,false);//在冒泡阶段被触发
...
btn.removeEventListener("click",handler,false);

不建议在事件捕获阶段注册事件处理程序。

IE事件处理程序

2个方法：attachEvent()和detachEvent()。 参数同上前两个。事件名称：on+名称 只支持冒泡。 在使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，this===window。

当添加了2个不同的事件处理程序时，执行的时候按相反的顺序。

var handler=function(){
    alert(this===window);//true
}
btn.attachEvent("onclick",handler);
...
btn.detachEvent("onclick",handler);

跨浏览器的事件处理程序

使用EventUtil对象来处理浏览器间的差异。 addHandler()方法:视情况来选择方法来添加事件。 removeHandler()方法：移除。

如果其他方法无效，默认采用DOM0级方法。

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;
    }
  }  
};
var handler=function(){
    alert("clicked");
};
EventUtil.addHandler(btn,"click",handler);
...
EventUtil.removeHandler(btn,"click",handler);