事件处理程序

事件就是用户或浏览器自身只i系那个的某种动作，诸如click、mouseover和mouseout等，都是事件的名称。而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以“on”开头。

**

HTML事件处理程序

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

<input type="button" value="Click me" onclick="alert('Clicked');"/>

这样指定事件处理程序具有一些独特之处。首先，这样会创建一个封装着元素属性值的函数，这个函数有一个局部变量event，也就是事件对象。在函数内部，this值就等于事件的目标元素。
在HTML中定义的事件处理程序可以包含要执行的具体动作，也可以调用在页面其他地方定义的脚本。如：

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

在HTML中指定事件处理程序有两个缺点：

1. 存在一个时差问题。用户可能在HTML元素一出现在页面上就触发相应的事件，但当时事件处理程序可能还未被解析。
2. HTML与JavaScript代码紧密。

**

DOM0事件处理程序（所有浏览器都支持）

**
通过JavaScript指定事件处理程序的传统方式，就是将一个函数赋值给事件处理程序属性。要使用JavaScript指定事件处理程序，首先必须取得一个要操作的对象的作用。如：

var btn = document.getElementById("myBtn");
btn.onclick = function(){
     alert("Clicked");
}

使用DOM0级方法指定的事件处理程序被认为是元素的方法，因此，这时候的事件处理程序是在元素的作用域中运行；换句话说，程序中的this引用当前元素。
将事件处理程序属性的值设置为null即可将DOM0级方法指定的事件处理程序删除。如：

btn.onclick = null;

虽然所有浏览器都支持DOM0级事件处理程序，但是却存在一个问题，就是不能为一个元素添加多个同类型事件。

**

DOM2级事件处理程序（IE9之后开始支持）

**
addEventListener()和removeEventListener()
接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值；最后这个布尔值参数如果为true，表示在捕获阶段调用事件处理程序，如果为false，表示在冒泡阶段调用事件处理程序。如：

var btn = document.getElementById("myBtn");
btn.addEventListener("click",function(){
    alert(this.id);
},false);

使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序，按照添加的顺序触发。如：

var btn = document.getElementById("myBtn");
btn.addEventListener("click",function(){
    alert(this.id);
},false);
btn.addEventListener("click",function(){
    alert("Hello World!");
},false);
先显示元素的id，其次显示"hello world！"信息

**

IE事件处理程序（只有IE和Opera支持）

**
attachEvent()和detachEvent()
接收2个参数：事件处理程序名称（以on开头）与事件处理程序函数。如：

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick",function(){
    alert("Clicked");
});

在使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此，this等于window。attachEvent()也可以用来为一个元素添加多个事件处理程序。

**

跨浏览器的事件处理程序

**
兼容方法：

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;
        }
    }
}