js事件详解一

事件处理的方法：

一、直接在html中编写

例如：

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

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

二、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()中的相同。

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