前言
事件处理程式平时用得多了，但是少有归纳，都是经验积累。
DOM0级
这种事件处理程式在第四代web浏览器出现，为所有浏览器支持。每个元素都有相应的事件处理程式属性，例如onclick，通过将事件函数引用赋值给事件处理程式属性绑定事件。
通过文档对象（document）获取元素引用
$btn = document.getElementById('#btn');
这样的代码写得多也见得多，特别是刚刚学js的时候。但是只看上面一段描述，估计小白就懵逼。
// 查看当前元素的onclick属性
console.log($btn.parentElement.children);
PS：可见当前onclick属性为null。
绑定事件
$btn.onclick = function() {
alert('i am isaac!');
}
完整代码
$btn = document.getElementById('#btn');
$btn.onclick = function() {
alert('i am isaac!');
}
解除事件绑定
由上文描述可以看到初始的时候$btn元素对象的onclick属性的值为null，要解除事件绑定，将改属性置空即可。
$btn.onclick = null;
this指针的指向
用DOM0级的方式绑定事件是在元素对象的作用域内运行，因此在事件函数内的this属性不是引用全局对象，而是引用当前元素对象，换言之，可以用过this属性获取当前元素的属性。
$btn.onclick = function() {
alert('输出当前元素id：'this.id);
}
触发时机
众所周知，或者不知。时间触发可以在事件捕获或事件冒泡阶段触发，DOM0级的事件处理程式只能在事件冒泡阶段触发。
每个属性只能绑定一个事件
由上文看见，DOM0事件绑定是通过赋值给元素的事件属性绑定事件的，因此当绑定赋值第二个事件函数的引用给同一事件属性就会覆盖上一个事件函数的引用。
$btn.onclick = function() {
alert(1);
};
$btn.onclick = function() {
alert(2);
}
// 输出2
DOM2级
DOM2级的事件处理程式分成两类：IE 和 非IE[捂脸]。
非IE
DOM2提供两个属性方法：
1）事件绑定：target.addEventListener(type, listener[, useCapture]);
2）删除事件：target.removeEventListener(type, listener[, useCapture]);
addEventListene
提供三个参数，事件名称、事件函数、是否在捕获阶段触发(boolean, 默认false)
$btn.addEventListener('click', function(){
alert('i am issac');
}, false);
和DOM0级事件的绑定一样，这种方式也是依附在元素的作用域执行，因此this属性保存的同样是当前元素对象的引用。
事件函数并非赋值在onclick上
$btn.addEventListener('click', function(){
alert('issac');
}, false);
绑定多个事件函数
但和DOM0级方式不同的是，DOM2的可以给同一元素绑定多个相同的事件。
// 给button绑定两个click事件
$btn.addEventListener('click', function(){
alert('event one');
}, false);
$btn.addEventListener('click', function(){
alert('event two');
}, false);
触发时机可控
由上可见DOM0的方式只能在冒泡阶段触发事件，而DOM2的方式是可以通过addEventListener的第三个参数控制。
removeEventListener
如果同一个监听事件分别为“事件捕获”和“事件冒泡”注册了一次，一共两次，这两次事件需要分别移除。两者不会互相干扰。
和DOM0的方式不同，不能通过置空onclick属性，毕竟事件本来就是通过赋值给onclick属性绑定的；
removeEventListener删除绑定的事件，是使用事件函数的引用进行删除的。因此，假如事件函数是使用匿名函数绑定，则无法删除事件。比如上面绑定的函数的写法。
// 可以解绑的绑定写法
function handler() {
alert(1);
}
// 绑定事件
$btn.addEventListeren('click', handler);
// 解除事件绑定
$btn.removeEventListeren('click', handler); // 有效
IE事件处理程式
IE实现了两个和非IE的两个类似的方法：
1）事件绑定：target.attachEvent(eventNameWithOn, callback);
2）删除事件：target.detachEvent(eventNameWithOn, callback)。
attachEvent
接受两个参数:
第一个是事件名，和非IE不同，IE中的事件名前面带on;
第二个是事件函数，
没有第三个参数，IE方式绑定的事件只能在冒泡阶段触发。
$btn.attachEvent('onclick', function() {
alert('i am isaac');
});
this引用
和DOM0以及非IE绑定方式不同，IE的DOM2的事件函数的this引用的是全局对象。
var id = "isaac";
$btn.attach('onclick', function() {
var isWindow = this === window;
alert(this.id, isWindow);
});
// 输出的是 isaac, true 而非 btn
同样可绑定多个事件
但是触发顺序则是和事件绑定顺序相反
$btn.attach('onclick', function() {
var isWindow = this === window;
alert(1);
});
$btn.attach('onclick', function() {
alert(2);
});
// 先后输出2，1
删除事件
和非IE的方式一样，需要使用事件函数的引用才能删除。
function handler() {
alert('i am isaac');
}
// 绑定事件
$btn.attachEvent('onclick', handler);
// 删除事件
$btn.detachEvent('onclick', handler);
小结
DOM0级
1 使用赋值方式绑定事件；
2 只能在冒泡阶段触发；
3 只能绑定一个事件函数；
4 通过置空onclick属性解绑事件；
5 事件函数this属性引用当前函数对象。
DOM2级
1 非IE方式
1.1 使用addEventListeren绑定事件；
1.2 事件名无on前缀；
1.3 使用addEventListeren第三个参数控制事件触发阶段；
1.4 可绑定多个事件函数；
1.5 多个事件函数的书法顺序和绑定顺序一样；
1.6 事件函数this属性引用当前函数对象；
2 IE方式
和非IE不同的是以下几点：
2.1 事件名带on前缀；
2.2 事件函数this属性引用全局对象；
2.3 多个事件函数的书法顺序和绑定顺序相反；
