事件处理程序的绑定

首先是事件的类型：事件主要分为页面事件（例如 load，unload，resize，scroll，focus，blur），鼠标事件（例如 mousemove，mousedown，mouseup，click，dblclick，mouseover，mouseout）和键盘事件（例如 keydown，keyup，keypress）等类别。

在不同的浏览器中，不同的 DOM 元素能触发的事件各不相同。而 window 对象这个特殊元素也能触发各种页面事件，但是在 IE9 之前的浏览器中不能触发鼠标事件和键盘事件，但我们可以用 document 元素的对应事件。

用 JavaScript 绑定事件处理程序的方法，最简单的方法是用 DOM0 级的方法。例如：

var element = document.getElementById("myelm");
var handler = function() {
    alert("clicked!");
};
// add event handler
element.onclick = handler;
// remove event handler
element.onclick = null;

上面的例子将 myelm 元素的 click 事件绑定到 handler 函数，此时 handler 函数是在该元素的作用域内运行的。这种方法各个浏览器都支持，但是有一个缺点，就是不能添加多个事件处理程序。为此我们可以改用 DOM2 级的绑定方法。例如：

var element = document.getElementById("myelm");
var handler1 = function() {
    alert("one!");
};
var handler2 = function() {
    alert("two!");
};
// add event handler
element.addEventListener("click", handler1, false);
element.addEventListener("click", handler2, false);
// remove event handler
element.removeEventListener("click", handler1, false);
element.removeEventListener("click", handler2, false);

在 IE9 之前这种方法不能使用，但是在旧版本 IE 中可以用类似的方法，例如：

var element = document.getElementById("myelm");
var handler1 = function() {
    alert("one!");
};
var handler2 = function() {
    alert("two!");
};
// add event handler
element.attachEvent("onclick", handler1);
element.attachEvent("onclick", handler2);
// remove event handler
element.detachEvent("onclick", handler1);
element.detachEvent("onclick", handler2);

用 addEventListener 方法和 attachEvent 方法添加事件处理程序，结果还有两点不同：其一是添加的多个事件处理程序执行顺序相反，在前面的两个例子中，结果分别为先"one"后"two"和先"two"后"one"。其二是前者的事件处理程序在元素的作用域内执行，而后者的处理程序在 window 作用域内执行。

参考资料：
[1] Javascript - Advanced event registration models
[2] element.addEventListener - MDN
[3] element.removeEventListener - MDN
[4] attachEvent method - MSDN
[5] detachEvent method - MSDN