JS事件处理程序的几种方法

JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。

 

事件就是用户或浏览器自身执行的某种动作。诸如click,load和mouseover，都是事件的名字而响应某个事件的函数就叫做事件处理程序。事件处理程序的名字以"on"开头。

1、HTML事件处理程序

  首先，这种方法已经过时了。因为动作（js代码）和内容（html代码）紧密糅合。但是写个小demo还是可以使用的。

（1）直接在html中定义事件处理程序及包含的动作

 代码如下：

<input type="button" value="click me!"/>

（2）html中定义事件处理程序，执行的动作则调用其他地方定义的脚本。

代码如下：

<input type="button" value="click me!"/> <script> function showMessage(){ alert("clicked!");

   注意：1.通过event变量可以直接访问事件本身，比如οnclick="alert(event.type)"会弹出click事件

             2.this值等于事件的目标元素

 

2.DOM 0级事件处理程序

这种方法简单而且跨浏览器，但是只能为一个元素添加一个事件处理函数

添加事件处理程序代码：

<input type="button" value="click me!" οnclick=showMessage()/>

<script>function showMessage(){ alert("clicked!");}

</script>

删除事件处理程序代码：

myBtn.οnclick=null;

注意：1.我们不能给一个元素同时添加两个事件

           2.我们不能控制元素的事件流（捕获or冒泡）

3.DOM 2级事件处理程序

DOM2级事件处理程序定义了两个方法：

1.addEventListener()--添加事件侦听器

2.removeEventListener()--删除事件侦听器

三个参数：1.要处理的事件名

                 2.作为事件处理程序的函数

                 3.表示事件流方式的布尔值。false为冒泡阶段处理程序；true为捕获阶段处理程序。

eg:<button id="button">点我</button>

     <script>

         var button=documentElementById("button");

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

                                                           alert(this.id);},false);

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

                                                           alert("another event");},false);

</script> 

结果：第一次弹出窗口：button

          第二次弹出窗口：another enent

注意：只能通过removeEventListener()这个删除事件处理程序的方法来移除addEventListener()添加的事件处理程序，且需要传入相同的参数。

eg: <button id="button">点我</button>

<script>

   var button=document.getElementById("button");

function handler(){

    alert(this.id);}

button.addEventListener("click",handler,false);

button.removeEventListener("click",handler,false);

成功移除！

注意:1传入方法的handler没有（）,是因为这里都只是定义函数，而不是调用。

四.IE事件处理程序中有类似与DOM2级事件处理程序的两个方法：

1.attachEvent()

2.detachEvent()

它们都接收两个参数：

1.事件处理程序名称。如onclick、onmouseover，注意：这里不是事件，而是事件处理程序的名称，所以有on。

2.事件处理程序函数。如function(){alert("clicked");}

之所以没有和DOM2级事件处理程序中类似的第三个参数，是因为IE8及更早版本只支持冒泡事件流。

注意：

1.IE事件处理程序中attachEvent()的事件处理程序的作用域和DOM0与DOM2不同，她的作用域是在全局作用域中。因此，不同于DOM0和DOM2中this指向元素，IE中的this指向window。

2.同样，我们可以使用attachEvent()来给同一个元素添加多个事件处理程序。但是与DOM2不同，事件触发的顺序不是添加的顺序而是添加顺序的相反顺序。

3.同样地，通过attachEvent()添加的事件处理程序必须通过detachEvent()方法移除，同样的，不能使用匿名函数。

4.支持IE事件处理程序的浏览器不只有IE浏览器，还有Opera浏览器。

第五部分：跨浏览器的事件处理程序

这一部分需要创建两个方法：

• addHandler()  --这个方法职责是视情况来使用DOM0级、DOM2级、IE事件处理程序来添加事件。
• removeHandler()--这个方法就是移除使用addHandler添加的事件。

这两个方法接收相同的三个参数：

1.要操作的元素--通过dom方法获取

2.事件名称--注意：没有on，如click、mouseover
3.事件处理程序函数--即handler函数

这两个方法的构造情况如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

var   EventUtil={    addHandler: function (element,type,handler){      if (element.addEventListener){        element.addEventListener(type,handler, false ); //注意：这里默认使用了false（冒泡）      } else   if (element.attachEvent){        element.attachEvent( "on" +type,handler);      } else {        element[ "on" +type]=handler;      }    },    removeHandler: function (element,type,handler){      if (element.removeEventListener){        element.removeEventListener(type,handler, false ); //注意：这里默认使用了false（冒泡）      } else   if (element.detachEvent){        element.detachEvent( "on" +type,handler);      } else {        element[ "on" +type]= null ;      }    } };

 即先判断DOM2级事件处理程序，再判断IE事件处理程序，最后使用DOM0级事件处理程序。