js事件处理

html事件处理程序

html中指定处理程序有2个缺点。首先，存在一个时差问题。因为用户可能会在html元素一出现在页面上就触发相应的事件，但当时相应的事件处理程序有可能尚不具备执行条件。拿之前的例子说明，假设showMessage()函数就是在按钮下方、页面最底部定义的。如果用户在页面解析showMessage()函数之前就单击了按钮，就会引发错误。为此，HTML事件处理程序都会被封装在一个try-catch块中，以便错误不会浮出水面。

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

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

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

通过HTML指定事件处理程序的最后一个缺点是HTML与JavaScript代码紧密耦合。若要更换事件处理程序，就要改动两个地方：HTML代码和JavaScript代码。这也是很多开发人员摈弃HTML事件处理程序，转而使用JavaScript指定事件处理程序的原因所在。

DOM0级事件处理程序

运用DOM0级方法指定的事件处理程序被认为是元素的方法。因此，这时候的事件处理程序是在元素的作用域中运行。

var btn=document.getElementById("myBtn");
btn.onclick=function(){
alert(this.id)
}

单击按钮显示的是元素的ID，这个ID通过this.id获得。在事件处理程序中通过this访问元素的任何属性和方法。以这种形式添加的事件处理程序会在事件流的冒泡阶段处理。

DOM0级对每个事件只支持一个事件处理程序。

btn.onclick=null;  //删除事件处理程序。

DOM2级事件处理程序

DOM2级事件定义了2个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点都包含这两种方法，并都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后的布尔值为true时，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

var btn=document.getElementById("mybtn")
btn.addEventListener("click",function(){
alert(this.id)
},false)
btn.addEventListener("click",function(){
alert("hello world")
},false)        //程序被触发后，先弹出id，再弹出 hello world

使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。如上图所示，这里为按钮添加了两个事件处理程序。这两个事件处理程序会按照被添加的顺序触发。

btn.removeEventListener("click",function(){
alert(this.id)
},false)  //去除失败

调用removeEventListener()时看似使用了相同的参数，但实际上，第二个参数与传入addEventListener()的那一个是完全不同的函数。传入removeEventListener()中的事件处理程序函数必须与传入addEventListener()中的完全相同。这也意味着addEventListener()添加的匿名函数将无法移除。

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

注意：

（1）IE9，Firefox,Safari,Chrome和Opera支持DOM2级事件处理程序。

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

IE事件处理程序

由于IE的兼容性以及IE8及更早版本只支持事件冒泡，IE支持attachEvent()和detachEvent()两种方法。通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。

var btn=document.getElementById("mybtn");
var handler=function(){
alert(this.id) //this --->window
}
var hello=function(){
alert("Hello world")
}
btn.attachEvent("onclick",handler)
btn.attachEvent("onclick",hello)// 事件触发先弹出hello world,在弹出id
btn.detachEvent("onclick",handler)

注意：

（1）attachEvent()的第一个参数是”onclick”,而非DOM的addEventListener()方法中的click

（2）在IE中使用attachEvent()与使用DOM0级方法的主要区别在于事件处理程序的作用域。在使用DOM0级方法的情况下，事件处理程序会在其所属元素的作用域内运行;在使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行。

（3）attachEvent可添加多个事件，不过，事件的触发顺序与DOM不同，这些事件处理程序不是以添加他们的顺序执行的，而是以相反的顺序被触发。

（4）支持IE事件处理程序的有IE和Opera。