事件就是用户或浏览器自身执行的某种操作。为时间指定处理程序的方式有以下几种：
- 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()"/>
缺点：
- 存在时差问题，如果函数是在页面最底部定义，用户在js代码还未解析时出发相应事件，就会引发错误。为此很多HTML事件处理程序都会被封装在一个try-catch块中，以便错误不会被显示出来。
- 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;
}
}
