事件处理程序

事件就是用户或浏览器自身执行的某种操作。为时间指定处理程序的方式有以下几种：

• HTML事件处理程序
• DOM0级事件处理程序
• DOM2级事件处理程序
• IE事件处理程序

HTML事件处理程序

直接在元素中定义事件处理程序，事件处理程序可以包含要执行的操作，也可以调用在页面其他地方定义的脚本

//直接在事件处理程序中包含
<input type="button" value="click me" onclick="alert('clicked')"/>
//调用其他地方定义的脚本
<script>
     function showMessage(){
        alert('clicked');
     }
</script>
<input type="button" value="click me" onclick="showMessage()"/>

缺点：

1. 存在时差问题，如果函数是在页面最底部定义，用户在js代码还未解析时出发相应事件，就会引发错误。为此很多HTML事件处理程序都会被封装在一个try-catch块中，以便错误不会被显示出来。
2. html代码和js代码紧密耦合，若要更换事件处理程序，则要改动html代码和js代码。

DOM0级事件处理程序

通过js指定事件处理程序的传统方式，就是把一个函数赋值给一个事件处理程序。(要使用这种方式，必须获得要操作的对象的引用)

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

使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此，事件处理程序是在元素的作用中运行，就是说程序中this指向当前元素。

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

删除这种形式绑定的事件处理程序，只需要将事件处理程序的的值设置为null。

DOM2级事件处理程序

• addEventListener()用于指定事件处理程序
• removeEventListener()用于移除用addEventListener()指定的事件处理程序

它们都接受三个参数：要绑定的事件名称，处理函数和一个布尔值。
布尔值为true，则事件处理程序在捕获阶段触发，为false则在事件冒泡阶段触发。与DOM0级一样，事件处理程序是在元素的作用域内运行，就是说程序中this指向当前元素

var btn = document.getElementById("myBtn");
var handler = function(){  alert("clicked"  };
//指定事件处理程序
btn.addEventListener("click", handler, false);
//移除事件处理程序
btn.removeEventListener("click", handler, false);

注意：移除时事件处理程序函数必须与指定的函数相同
优点：可以添加多个事件处理程序，会按照添加它们的顺序触发

IE事件处理程序

• attachEvent()用于指定事件处理程序
• detachEvent()用于移除事件处理程序

它们都接受两个参数：要绑定的事件名称，处理函数。
因为IE8及更早版本只支持事件冒泡，所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。
不同于DOM0级和DOM2级，事件处理程序是在元素的作用域内运行。使用attachEvent()指定事件处理程序，事件处理程序会在全局作用域中运行，即this指向window。
特点：可以为一个元素添加多个事件处理程序，但是触发顺序和添加顺序相反。

跨浏览器的事件处理程序

function addHandler(element, type, handler){
    if(element.addEventListener){
        element.addEventListner(type, handler, false);
    }else if(element.attachEvent){
        element.addtachEvent('on' + type, handler);
    }else{
        element['on' + type] = handler;
    }
}
function removeHandler(element, type, handler){
    if(element.removeEventListener){
        element.removeEventListner(type, handler, false);
    }else if(element.detachEvent){
        element.detachEvent('on' + type, handler);
    }else{
        element['on' + type] = handler;
    }
}