二、使用事件处理程序

1. HTML事件处理程序

即我们直接在HTML代码中添加事件处理程序，如下面这段代码：

<input id="btn1" value="按钮" type="button" onclick="showmsg();">
<script>
   function showmsg(){
       alert("HTML添加事件处理");
   }
</script>

从上面的代码中我们可以看出，事件处理是直接嵌套在元素里头的，这样有一个毛病：就是html代码和js的耦合性太强，如果哪一天我想要改变js中showmsg，那么我不但要再js中修改，我还需要到html中修改，一两处的修改我们能接受，但是当你的代码达到万行级别的时候，修改起来就需要劳民伤财了，所以，这个方式我们并不推荐使用。

2. DOM0级事件处理程序

即为指定对象添加事件处理，看下面的一段代码

<input id="btn2" value="按钮" type="button">
<script>
    //DOM0级事件
    var btn2 = document.getElementById("btn2");
    btn2.onclick=function(){
        alert("这是通过dom0级添加的事件");
    }
    //btn2.onclick=null;//删除事件btn2的点击事件，将其置为null即可
</script> 

从上面的代码中，我们能看出，相对于HTML事件处理程序，DOM0级事件，html代码和js代码的耦合性已经大大降低。但是，聪明的程序员还是不太满足，期望寻找更简便的处理方式，下面马海祥就来说说第三种处理方法。

3. DOM2级事件处理程序

DOM2级事件定义了两个方法：用于处理指定和删除事件处理程序的操作
addEventListener(type,handler,false) //添加事件监听
removeEventListner(type,handler,false) //删除事件监听

接收三个参数：type:事件名、hander:作为事件处理程序的函数和布尔值 (布尔值true:表示在捕获阶段调用事件处理程序; false表示在冒泡阶段调用事件处理程序，一般情况都使用false,兼容浏览器)，IE 里是不兼容的。

DOM0和DOM2共同特点：就是可以给一个元素上添加多个事件处理程序 ，他们按照添加的顺序执行。

DOM2也是对特定的对象添加事件处理程序，但是主要涉及到两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和 removeEventListener()。
它们都接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值（是否在捕获阶段处理事件），看下面的一段代码：

<input id="btn3" value="按钮" type="button">
<script>
    //DOM2级事件
    var  btn3 = document.getElementById('btn3');
    function show3(){alert("DOM2级添加事件处理程序");}
    //这里我们把最后一个值置为false，即不在捕获阶段处理，一般来说冒泡处理在各浏览器中兼容性较好
     btn3.addEventListener("click",show3,false);
    //btn3.removeEventListener("click",show3,false); //如果想要把这个事件删除，只需要传入同样的参数即可
</script>

这里我们可以看到，在添加删除事件处理的时候，最后一种方法更直接，也最简便。但是我提醒大家需要注意的是，在删除事件处理的时候，传入的参数一定要跟之前的参数一致，否则删除会失效！

4. IE事件处理程序

attachEvent(type,hander) //添加事件
detachEvent(type,hander)//删除事件
//接受2个参数 ： type事件处理程序名称，hander事件处理程序函数

注意：布尔值没有了的原因：IE8以及更早的浏览器版本都只支持事件冒泡

怎么处理事件处理程序的浏览器兼容性？
//跨浏览器事件处理程序
var eventUtil={
//添加句柄– 给元素添加事件
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);//DOM2级添加事件处理程序
}else if(element.attachEvent){
element.attachEvent(‘on’+type,handler);//IE添加事件处理程序
}else{
element[‘on’+type]=handler;//DOM0级添加事件
//完全等价element.onclick===element[‘on’+type]
}
},
//删除句柄- 给元素删除事件
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);//DOM2级删除事件处理程序
}else if(element.detachEvent){
element.detachEvent(‘on’+type,handler);
}else{
element[‘on’+type] =null;
}
}
}

相关文章:
1.理解事件流
2.使用事件处理程序
3.Event对象