JS的事件处理

事件就是文档或浏览器窗口发生触电一些特定交互瞬间，JS与HTML之间的交互是通过事件实现的，如click,load,mouseover都是事件的名称。

事件处理的方式有：HTML事件处理、DMO0级事件处理、DOM2级事件处理、IE事件处理程序。

一、html事件处理程序（最为传统）

在html标签中写入事件处理函数。eg:<input type="button" value="click me" onclick="alert("hello")" />

缺点：1、当用户在html元素一出现在页面上就去触发相应的事件时，事件的处理程序可能还不具备执行条件（比如说调用的函数还木有被解析），就会引发错误。eg:<input type="button" value="click me" onclick="message()" /><script type="text/javascript">function message(){alert("hello
world");}</script>因为调用的函数处于按钮的下方，如果在message函数被加载之前就点击了按钮就会引发错误。

2、如果要修改事件处理函数名称，就要改动两个地方：html代码和javascript代码。

二、DMO0级事件处理程序

eg:var btn=document.getElementById("myBtn");btn.onclick=function(){alert("hello")};

缺点：对于共用一个相同id的两个相同的事件来说，事件1会被事件2所覆盖。eg:var btn=document.getElementById("myBtn");btn.onclick=function(){alert("hello1")};btn.onclick=function(){alert("hello2")};只会显示hello2

可删除指定的事件处理程序，只要将事件处理程序的属性设置为null就Ok了。eg:btn.onclick=null;将处理程序设置为null以后，再点击按钮不会发生任何动作。

三、DOM2级事件处理程序

DOM2级事件定义了两个方法，用于指定和删除事件处理程序。这两个操作分别为：addEventListener()和removeEventListner().所有的DOM节点都包含这两个方法。他们要接受3个参数，分别为：要处理的事件名，处理函数，布尔值。最后的布尔值参数如果为ture,表示在捕获阶段处理程序，如果为false，表示在冒泡阶段调用事件处理程序。

例如在按钮上为click添加事件处理程序，可以用下面的代码：

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

btn.addEventListner("onclick",function(){alert("hello world");false});

使用DOM2事件处理程序的优点是：可以为同一个元素添加多个事件处理程序。

例：var btn=getElementById("myBtn");

btn.addEventListner("click",function(){alert(this.id);},flase);

btn.addEventListner("click",function(){alert("hello world");},flase);

结果：先显示id，后显示hello world。

通过addEventListner()添加的事件处理程序只能通过removeEventListner来删除。移除时使用的参数与添加事件处理程序的参数相同。另：通过addEventListner添加的匿名函数无法删除。

四、IE事件处理程序。

IE添加和删除事件处理程序的函数分别为：attachEvent()和detachEvent();这两个函数接收相同的两个参数：事件处理程序名与事件处理函数。由于IE只支持事件冒泡，所以通过attachEvent添加的事件处理程序都会添加到冒泡阶段。

例如：var btn=document.getElementById("myBtn");

btn.attachEvent("onclick",function(){alert("hello world");});

IE在使用attachEvent方法的情况下，事件处理程序的作用域为全局作用域，因此this等于window。（在编写跨浏览器的代码时，记住这一点非常重要）。

与addEventListner类似，attachEvent()方法也可以用来为一个元素添加多个事件处理程序；

eg:

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

btn.attachEvent("onclick",function(){alert("clicked");});

btn.attachEvent("onclick",function(){alert("hello world");});

值得注意的是：这些事件的处理程序是按逆序触发的，也就是说，先弹出hello world 再弹出clicked。

五、跨浏览器的事件处理程序

为了以跨浏览器的方式处理事件，主要可以使用两个方法：

1、使用能隔离浏览器差异的js库。

2、自己编写：

var btn1=document.getElementById(btn1);

if(btn1.addEventListener){

btn1.addEventListener('click',demo);

}else if(btn1.attachEvent){

btn1.attachEvent('click',demo);

}else {

btn1.onclick=demo;

}

demo=function(){

alert('Hello');

}