绑定事件的方法

HTML事件处理程序
缺点：
时差问题: 用户可能会在HTML元素一出现在页面上就触发响应；的事件，但当时的事件处理程序有可能尚不具备执行条件，就会引发错误
HTML与JavaScript代码紧密耦合

DOM0级处理事件
优势：具有跨浏览器的优势
缺陷：只能绑定一次事件处理程序

绑定事件： element.on + '事件类型' = 事件处理程序
解绑事件: element.on + '事件类型' = null;

DOM2级事件处理程序
绑定事件
element.addEventListener(要处理的事件名, 作为处理程序的函数, 是否在捕获阶段调用事件处理程序)
要处理的事件名
'click'
处理程序的函数
function () {}
函数名
是否在捕获阶段调用事件处理程序
true: 在捕获阶段调用事件处理程序
false: 在冒泡阶段调用事件处理程序(默认)
解绑事件
ele.removeEventListener('click', 事件名);
如果事件处理程序是匿名函数则无法解绑

特点： 可以多次绑定不同的事件处理程序，并且会按照它们的绑定顺序执行

IE事件处理程序

绑定事件
ele.attachEvent(事件名, 事件处理程序函数)
事件名
'onclick'
事件处理程序函数
function () {}
函数名

解绑事件
ele.detachEvent(事件名, 事件处理程序函数)
条件必须提供相同的参数
事件处理程序函数也必须是有名函数

IE只支持事件冒泡
attachEvent()也可以绑定多个事件处理程序函数，但是它的执行顺序与addEventListener的执行顺序相反(IE9 IE10 采用的是addEventListener)

attachEvent()与使用DOM0级方法的主要区别，在于事件处理程序的作用域
在使用DOM0级方法的情况下，事件处理程序会在其所属元素的作用域内运行
在使用attachEvent()方法情况下，事件处理程序会在全局作用域中运行，因此this等于window