JS事件处理程序

事件：用户或者浏览器自身执行的某种动作，例如click，load，mouseover等。

事件处理程序：响应某个事件的函数。事件处理程序的名字以"on"开头。因此click事件的事件处理程序就是onclick，load事件的事件处理程序就是onload。

为事件指定事件处理程序的方式有好几种：

1. HTML事件处理程序

　　一般不用。

2. DOMLevel0级事件处理程序（所有浏览器均支持）

　　首先必须取得要操作的对象的引用：

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

DOMLevel0事件处理程序被认为是元素的方法。因此，这时候的事件处理程序是在所操作的元素的作用域内运行，所以this引用当前元素：

var btn = document.getElementBy("myBtn");
btn.onclick = function(){
   alert(this.getAttribute("id")); 
　　alert(this.id); 
};

上面的例子获取了元素的id，当然还可以通过this访问元素的任何属性和方法，访问元素属性可以通过下面两种方法:

this.propertyName
this.getAttribute(propertyName)

访问元素的方法目前我只知道通过this.methodName来访问。

那么如何删除DOMLevel0事件处理程序呢？

btn.onclick = null; //删除事件处理程序

将事件处理程序设置为null后，再单击按钮将不会有任何动作发生。

DOMLevel0事件处理程序会在事件流的冒泡阶段被处理。

3. DOMLevel2事件处理程序（>=IE9, FireFox, Safari, Chrome, Opera）

　　DOMLevel2事件处理程序定义了两个方法：

addEventListener(eventName, functionName, true/false)
removeEventListener(eventName, functionName, true/false)

分别用来添加事件处理程序和删除事件处理程序。三个参数分别是：事件名，事件处理函数，捕获(true)还是冒泡(false)阶段处理该事件。

下面这里例子说明了设置为捕获跟冒泡的区别：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        div {
            width: 100px;
            height: 50px;
            background-color: gray;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>

    <script type="text/javascript">
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        var div3 = document.getElementById("div3");

        div1.addEventListener("click", function(){
            alert("div1");
        }, false);

        div2.addEventListener("click", function(){
            alert("div2");
        }, false);

        div3.addEventListener("click", function(){
            alert("div3");
        }, false);

    </script>
</body>
</html>

通过addEventListener()添加的事件处理程序只能通过removeEventListener()来移除，移除时传入的参数与添加事件处理程序时使用的参数必须相同，通过addEventListener()添加的匿名函数将无法移除，如果想随后移除某个事件处理程序，则添加事件处理程序的时候要注意使用有名函数：

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

//这里省略了其他代码

btn.removeEventListener("click", handler, false);

3. IE事件处理程序（<=IE8）

　　IE实现了与DOMLevel2类似的两个方法：

attachEvent(eventHandlerName, functionName)
detachEvent(eventHandlerName, functionName)

四点与DOMLevel2不同的地方需要注意：

添加到冒泡阶段
第一个参数是eventHandlerName("onclick")，而不是eventName("click")
事件处理程序在全局作用域内运行，所以this指向window（编写跨浏览器代码时需要注意）
多次添加同一个事件处理程序时，后添加的先执行

4. 使事件处理程序能够跨浏览器

　　DOMLevel0和IE事件处理程序都会添加到冒泡阶段，因此要保证处理事件的代码能够在大多数浏览器下一致的运行，只需关注冒泡阶段。下面创建EventUtil对象来处理浏览器之间的差异。EventUtil对象包含两个方法：

addHandler(element, eventName, functionName)
removeHandler(element, eventName, functionName)

var EventUtil = {
    addHandler: function(element, eventName, handler){
        if(element.addEventListener){
            element.addEventListener(eventName, handler, false);//添加到冒泡阶段
        }
        else if(element.attachEvent){
            element.attachEvent("on" + eventName, handler);
        }
        else {
            element["on" + eventName] = handler;
        }
    },
    removeHandler: function(element, eventName, handler){
        if(element.removeEventListener){
            element.removeEventListener(eventName, handler, false);
        }
        else if(element.detachEvent){
            element.detachEvent("on" + eventName, handler);
        }
        else {
            element["on" + eventName] = null;
        }
    }
};

调用该API的方式如下：

function handler(){
    alert("clicked");
}
EventUtil.addHandler(div1, "click", handler);
EventUtil.removeHandler(div1, "click", handler);

注意：为了避免IE中事件处理程序的作用域问题，上面handler函数中不能出现this引用。