注册事件处理程序

设置 JavaScript 对象属性为事件处理程序

注册事件处理程序最简单的方法就是通过设置事件目标的属性为所需事件处理程序函数，按照约定，事件处理程序属性的名字以「on」开头：onclick、onchange、onload 等，这些属性名是区分大小写的，所有都是小写：

window.onload = function () {
    var elt = document.getElementById("shipping_address");
    elt.onsubmit = function () {
        return validate(this);
    };
};

这种事件处理程序注册技术适用于所有浏览器的所有常用事件类型。但是这种方式有一个缺点，那就是其设计都是围绕着假设每个事件目标对于每种事件类型将最多只有一个处理程序。

设置 HTML 标签属性为事件处理程序

我们也可以通过 HTML 属性来设置事件处理程序，这种情况下，属性值是 JavaScript 代码字符串，这段代码是事件处理程序函数的主体，而非完整的函数声明：

<button onclick="alert('Thank you!');">点击这里</button>

如果有多条 JavaScript 语句，需要用分号分开。

当指定一段 JavaScript 代码作为 HTML 事件处理程序属性值时，浏览器会把代码串转化为类似如下的函数：

function(event) {
    with(document) {
        with(this.form || {}) {
            with(this) {
                /* 这里是JavaScript代码 */
            }
        }
    }
}

如果浏览器支持 ES5，它将在非严格模式下执行这段代码。

addEventListener()

在除 IE8 及之前版本的所有浏览器都支持的标准事件模型中，任何能成为事件目标的对象都定义了一个名叫 addEventListener() 的方法，这个方法可以为事件目标注册事件处理程序。该方法支持三个参数：第一个是要注册处理程序的事件类型，第二个是指定事件类型发生时应该调用的函数，最后一个参数是布尔值（通常是 false），下面我们来演示下该方法的调用：

<button id="mybutton">点击我</button>
<script>
    var b = document.getElementById("mybutton");
    b.onclick = function () {
        alert("Thanks for clicking me!");
    };
    b.addEventListener("click", function () {
        alert("Thanks for clicking me!");
    }, false);
</script>

使用这种方式的好处是，多次调用 addEventListener() 为同一对象注册同一事件类型的多个处理程序函数，当对象上发生事件时，所有该事件类型的注册处理程序都会按照注册的顺序调用。

注：使用相同的参数在同一个对象上多次调用 addEventListener() 是没用到，处理程序只会注册一次。

与 addEventListener() 相对的是 removeEventListener() 方法，它同样有三个参数，但是其作用是从对象中删除事件处理程序函数而非添加，常用于临时注册的事件处理程序：

document.removeEventListener("mousemove", handleMouseMove, true);

attachEvent()

IE8 及之前的版本不支持 addEventListener() 和 removeEventListener()，但是提供了类似的 attachEvent() 和 detachEvent()，两者类似但有如下不同：

• IE 不支持事件捕获，所以 attachEvent() 和 detachEvent() 只需要两个参数
• attachEvent() 和 detachEvent() 的第一个参数需要带「on」前缀
• attachEvent() 允许相同的事件处理程序函数注册多次，当特定事件发生时，注册函数的调用次数和注册次数一样。

以下是示例代码：

var b = document.getElementById("mybutton");
var handler = function () {
    alert("Thank you!");
};
if (b.addEventListener) {
    b.addEventListener("click", handler, false);
} else if (b.attachEvent) {
    b.attachEvent("onclick", handler);
}