13.2 事件处理程序

时间就是用户或浏览器自身执行的某种动作。
诸如click、load和mouseover 都是事件的名字
而响应某个事件的事件处理程序就是onclick，load事件的事件处理程序就是onload。
为事件处理程序的方式有好几种：

13.2.1 HTML事件处理程序

某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值应该是能够执行的Javascript代码。
例如要在按钮被单击时执行一些Javascript，可以这样编写：

<input type="button" value="Click me" onclick="alert('Clicked')"/>
//当单击这个按钮时，就会显示一个警告框。
//这个操作是通过制定onclick特性并将一些Javascript代码作为他的值来定义的。

在HTML中定义的事件处理程序可以包含要执行的具体动作，也可以调用在页面其他地方定义的脚本：

<script>
    function showMessage(){
        alert("Hello world!");
     }
</script>
<input type="button" value="Click Me" onclick="showMessage()">

这个函数时在一个独立的<script>元素中定义的，当然也可以被包含在一个外部文件中。事件处理程序中的 代码在执行时，有权访问全局作用域中的 任何代码
这样指定事件处理程序具有一些独到之处。首先，这样会创建一个封装着远古三属性值的函数。这个函数中有一个局部变量event，也就是事件对象。

通过event变量，可以直接访问事件对象，不用给它自定义，也不用从函数的参数列表中读取。

//输出"click"
<input type="button" value="Click Me" onclick="alert(event.type)">

//输出"Click Me"
<input type="button" value="Click Me" onclick="alert(this.value)">

不过在HTML中指定事件处理程序有两个缺点。
1）首先，存在一个时差问题。因为用户可能会在HTML元素一出现在页面上就触发相应的时间，但当时的事件处理程序有可能尚不具备执行条件
例如：

<script>
    function showMessage(){
        alert("Hello world!");
     }
</script>
<input type="button" value="Click Me" onclick="showMessage()">
//假设showMessage()函数时在按钮下方、页面的最底部定义的
//如果用户在页面解析showMessage（）函数之前就单击了按钮就会引发错误

为此，很多HTML事件处理程序都会被封装在一个try-catch块中，以便错误不会浮出水面:

<input type="button" value="Click Me" Onclick="try{showMessage();}catch(ex){}">

这样如果在showMessage（）函数有定义之前单击了按钮，用户将不会看到Javascript错误，因为在浏览器有机会处理错误之前，错误就被捕获了。

2）另一个缺点就是这样扩展时间处理程序的作用域链在不同浏览器中会导致不同结果。
不同Javascript引擎遵循的标识符解析规则略有差异，很可能会在访问非限定成员时出错。

通过HTML指定事件处理程序的最后一个缺点是HTML与Javascript代码紧密耦合。如果要更换事件处理程序，就要改动两个地方：HTML代码和Javascript代码。

13.2.2 DOM0级时间处理程序

通过JavaScript指定事件处理程序的程序方式，就是将一个函数赋值给一个事件处理程序属性。这种为事件处理程序赋值的方法从第四代web浏览器出现到现在仍然为所有现代浏览器所支持。原因一是简单，二是具有跨浏览器的优势。
要使用JavaScript指定事件处理程序，首先必须取得一个要操作的对象的引用。
每个元素（包括window和document）都有自己的事件处理程序属性，这些属性通常全部小写，例如onclick。将这种属性的值设置为一个函数，就可以指定事件处理程序：

var btn=document.getElementById("myBtn");
btn.onclick = function(){
      alert("Clicked");
}
//注意，在这些代码运行以前不会指定事件处理程序，因为如果这些代码在页面中位于按钮后面，就有可能在一段时间内怎么单击都没有反应

使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此，这时候的时间处理程序是在元素的作用域中运行，换句话说，程序中的this引用当前元素。

var btn=document.getElementById("myBtn");
btn.onclick=function(){
    alert(this.id);//"myBtn'
};
//以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。

也可以删除通过DOM0级方法指定的事件处理程序，将事件处理程序属性的值设置为null：
btn.onclick=null //删除事件处理程序

12.2.3 DOM2级事件处理程序

“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener（）和removeEventListener（）
所有DOM节点中都包含这两个方法，并且接受3个参数：
1、要处理的事件名
2、作为事件处理程序的函数
3、一个布尔值（如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序）
要在按钮上为click事件添加事件处理程序，可以使用下列代码：

var btn=document.getElementById("myBtn");
btn.addEventListener("click",function(){
    alert(this.id);
},false);
//该事件会在冒泡阶段被触发（因为最后一个参数是false）

使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序：

var btn=document.getElementById("myBtn");
btn.addEventListener("click",function(){
    alert(this.id);
},false);
btn.addEventListener("click",function(){
    alert("Hello world");
},false);

这里为按钮添加了两个时间处理程序。这两个时间处理程序会按照添加它们的顺序触发，因此首先会显示元素的ID，其次会显示“Hello world”消息。

通过addEventListener（）添加的事件处理程序只能使用removeEventListener（）来移除；移除时传入的参数与添加处理程序时使用的参数相同。也就意味着通过addEventListener（）添加的匿名函数将无法移除。

var btn=document.getElementById("myBtn");
btn.addEventListener("click",function(){
    alert(this.id);
},false);
btn.removeEventListener("click",function(){ //没有用
    alert(this.id);
},false);
//虽然调用removeEventListener时看似使用了相同参数，但实际上，第二个参数与传入的addEventListener中的是完全不同的函数

var btn=document.getElementById("myBtn");
var handler=function(){
    alert(this.id);
};
btn.addEventListener("click",handler,false);

btn.removeEventListener("click",handler,false);//有效

大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度的兼容各种浏览器。最好只在需要在时间到达目标之前截获它的时候将事件处理程序添加到捕获阶段。如果不是特别需要，不建议在事件捕获阶段注册事件处理程序。

13.2.4 IE事件处理程序

IE实现了与DOM中类似的两个方法：attachEvent（）和detachEvent（）
这两个方法接收相同的两个参数：事件处理程序名称和事件处理程序函数
由于IE8及更早版本只支持事件冒泡，所以通过attachEvent（）添加的事件处理程序都会被添加到冒泡阶段。

要使用attachEvent（）为按钮添加一个事件处理程序，可以如下使用：

var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(){
    alert("Clicked");
})
//注意，attachEvent（）的第一个参数是“onclick”，而非DOM的addEventListener（）方法中的“click”

在IE中使用attachEvent（）与使用DOM0级方法的主要区别在于事件处理程序的作用域。

在使用DOM0级方法的情况下，事件处理程序会在其所属元素的作用域内运行；在使用attachEvent（）方法的情况下，事情处理程序会在全局作用域中运行，因此this等于window。

addEventListener（）类似，attachEvent（）方法也可以用来为一个元素添加多个事件处理程序

不过与DOM方法不同的是，这些事件处理程序不是以添加它们的顺序执行，而是以相反的顺序被处罚。

使用attachEvent（）添加的事件可以通过detachEvent（）来移除，条件是必须提供相同的参数。与DOM方法一样，这也意味着添加的匿名函数不能被移除。不过只要能够将对相同函数的引用传给detachEvent（），就可以移除相应的事件处理程序：

var btn = document.getElementById("myBtn");
var handler = function(){
    alert("Clicked");
};
btn.attachEvent("onclick",handler);

btn.detachEvent("onclick",handler);

这个例子将保存在变量handler中的函数作为事件处理程序。因此，后面的detachEvent（）可以使用相同的函数来移除事件处理程序。

13.3.5 跨浏览器的事件处理程序

为了以跨浏览器的方式处理事件，不少开发人员会使用能够隔离浏览器差异的Javascript库，还有一些开发人员会自己开发最合适的事件处理的方法。要保证处理事件的代码能在大多数浏览器下一致的运行，只需关注冒泡阶段。
第一个要创建的方法是addHandler（），它的职责是视情况分别使用DOM0级方法、DOM2级方法或IE方法来添加事件
addHandler（）方法接收三个参数：
1）要操作的元素
2）事件名称
3）事件处理程序函数

与addHandler（）对应的方法是removeHandler（），它也接受相同的参数。这个方法的职责是移除之前添加的事件处理程序——无论该事件处理程序是采用什么方式添加到元素中的。如果其他方法无效，默认采用DOM0级方法。

这两个方法首先都会检测传入的元素中是否存在DOM2级方法。如果存在DOM2级方法，则使用该方法：传入事件类型、事件处理程序函数和第三个参数false（表示冒泡阶段）。
如果存在的是IE的方法，则采取第二种方案。 注意，为了在IE8及更早版本中运行，此时的事件类型必须加上“on”前缀

addHandler（）和removeHandler（）没有考虑到所有浏览器的问题，例如在IE的作用域的问题。不过，使用它们添加和移除事件处理程序还是足够的。还要注意的是，DOM0级对每个事件只支持一个事件处理程序。