读《Javascript高级程序设计》中的javascript事件处理程序（事件侦听器）心得

     

      今天读了《Javascript高级程序设计》中的javascript事件处理程序（事件侦听器）部分的内容，总结一些自己的心得：

      事件就是用户或者浏览器自身执行的某种动作。例如click 、load 、mouseover等等，都是事件的名字，而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的方式分为以下几种：

1. HTML事件处理程序：

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

   <input  type="button"  value="Click me"  onclick="alert("Clicked")"/>

 当单击这个按钮时，就会显示一个警告框，这个操作是通过指定onclick特性并将一些javaScript代码作为它的值来定义的。

<script type="text/javascript">

function showMsg(){

alert("Hello world!");

}

</script>

<input type="button" value="Click me" onclick="showMessage()"/>

在这个例子中，单击按钮就会调用showMsg()函数，这个函数是在一个独立的<script>元素中定义的，当然也可以被包含在一个外部文件中，事件处理程序中的代码执行时，有权访问全局作用域中的任何代码，

但是在HTML中指定事件处理程序有两个缺点：

1 .存在一个时差问题：

  因为用户可能会在HTML元素一出现在页面上就触发相应的事件，但当时的事件处理程序有可能尚不具备执行条件。以前面的例子来说，showMsg()函数是在按钮下面、页面的底部定义的，如果用户在页面解析showMsg()函数之前就单击了按钮，就会引发错误。为此，很多HTML事件处理程序都会被封装在一个try-catch块中，以便错误不会浮出水面。如下面的例子所示：

<input type="button" value="Click me" onclick="try{showMessage();}catch(ex){}" />

2. HTML与javaScript代码紧密耦合

 如果要更换事件处理程序，就要改动两个地方：html代码和JavaScript代码，而这正是许多开发人员摒弃HTML事件处理程序，转而使用JavaScript指定事件处理程序的原因所在。

2. DOM0级事件处理程序

通过JavaScript指定事件处理程序的方式，就是将一个函数赋值给一个事件处理程序的属性。这种为事件处理程序赋值的方法是在第四代Web浏览器中出现的，而且至今仍然为所有现代浏览器所支持。要使用JavaScript指定事件处理程序，首先必须取得一个要操作的对象引用。

  每个元素都有自己的事件处理程序属性，这些属性通常全部小写，例如：

var btn=document.getElementById("myBtn");

btn.onclick=function(){

alert("Clicked");

};

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

使用DOM0级方法指定的事件处理程序被认为是元素的方法，因此，这个时候的事件处理程序是在元素的作用域中运行的，也就是说，程序中的this引用当前。例如：

 

var btn=document.getElementById("myBtn");

btn.onclick=function(){

alert(this.id);

};

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

也可以删除通过DOM0级的方法指定的事件处理程序，只要像下面这样将事件处理程序属性的值设置为null就可以了：

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

将事件处理程序设置为null之后，再单击按钮将不会有任何动作发生。

3. DOM2级事件处理程序

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

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

 var btn=document.getElementById("myBtn");

btn.addEventListener("click", function(){

alert(this.id);

},false);

使用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()添加的匿名函数将无法移除。

  大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度的兼容各种浏览器，

4. IE事件处理程序

   IE实现了与dom中类似的两个方法，attachEvent()和detachEvent()，这两个方法接受项目的两个参数：事件处理程序名称和事件处理程序函数，由于IE只支持事件冒泡，所以通过attachEvent()添加的事