js事件详解一

事件处理的方法：

1、直接在html中编写

例如：

<form>
    <input type="text" name="username" value="">
    <input type="button" value="Echo Username" onclick="alert(username.value)">
</form>

但是这样处理的事件存在两个缺点，一个是时间差问题，一个是不同浏览器对标识符的解析有差异，很可能会在访问非限定对象成员时出错。

2、JavaScript指定事件处理程序

每个元素都有自己的事件处理程序属性，这些属性通常全部小写，例如onclick。将这种属性的值设置为一个函数，就可以指定事件处理程序，如下所示：

var btn=document.getElementById('btn');
    btn.onclick=function(){
        alert('clicked');
    }

在此，我们通过文档对象取得了一个按钮的引用，然后为它指定了onclick事件处理程序。但要注意，在这些代码运行以前不会指定事件处理程序，因此如果这些代码在页面中位于按钮后面，就可能在一段事件内怎么单击都没有反应。

删除事件：

btn.onclick=null;

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

例如，要再按钮上为click事件添加处理程序，可以使用以下代码：

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

与DOM0级方法一样，这里添加的事件处理程序也是在其依附的元素的作用域中运行。

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

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

btn.addEventListener("click",function(){
    alert("Hello World");
},false);

这里为按钮添加了两个事件处理程序。这两个事件处理程序会按照添加它们的顺序触发。

通过addEventListener()添加的事件处理程序之恩给你使用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也以为着通过addEventListener()添加的匿名函数将无法移除。因为传入removeEventListener()中的事件处理程序函数必须与传入addEventListener()中的相同。

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