javascript中对各种事件处理程序的个人总结

这些天对在js的整理学习中，发现了一个我以前不知道的js事件处理方式，相信很多同学在起初学习web开发的时候，可能会直接将onclick之类的属性直接赋值放到html标签内，这样会使页面代码显得复杂混乱，为了让功能和代码分离，找出以下几种事件处理程序。

事件处理程序

以下代码示例中都以单机事件为例

1.HTML事件处理

<input type="button" onclick="demo()" value="按钮"/>
<script type="text/javascript">
       function demo(){
            alert("HTML事件");
       }
</script>

这种处理方式也就是最基础的事件处理方式，是将事件直接添加到HTML结构中。

2.DOM 0级事件处理

把一个函数赋值给一个时间处理程序属性

<input type="button" value="按钮1" id="btn"/>
<script type="text/javascript">
      var btn=document.getElementById("btn");
      btn.onclick=function(){alert("DOM 0级事件处理");}//将会被覆盖
      btn.onclick=function(){alert("DOM 0级事件处理1");}
      //只显示第二个onclick事件的执行效果
      btn.onclick=null;//移除onclick事件
</script>

3.DOM 2级事件处理

方法用于向指定元素添加事件句柄

addEventListener(“事件名”，”事件处理函数”，”布尔值”)； 布尔值一般忽略不写

true:事件捕获

false:事件冒泡

removeEventListener(“事件名”，”事件处理函数”);

<input type="button" value="按钮2" id="btn1"/>
<script type="text/javascript">
     var btn1=document.getElementById("btn1");
     btn1.addEventListener("click",demo1);
     btn1.addEventListener("click",demo2);
     function demo1(){
          alert("DOM2级事件处理程序1");
     }
     function demo2(){
          alert("DOM2级事件处理程序2");
     }
     //两个单机事件可以依次弹出，不会被覆盖
     btn1.removeEventListener("click",demo2);//只移出demo2事件
</script>

4.IE事件处理程序

兼容IE8及以下版本的浏览器

attachEvent（”事件名”，”事件处理函数”）

detachEvent（”事件名”，”事件处理函数”）

<input type="button" value="按钮3" id="btn2"/>
 <script type="text/javascript">
       var btn2=document.getElementById("btn2");
       btn2.attachEvent("onclick",demo3);
       function demo3(){
             alert("IE事件处理程序");
       }
       btn1.detachEvent("click",demo2);//只移出demo2事件
  </script>

注意：事件名必须写成onclick，一定要加on

5.跨越浏览器时间处理

一般在项目中为了兼容多种浏览器可以使用以下这中写法：

<input type="button" id="btn2"/>
<script type="text/javascript">
    var btn2=document.getElementById("btn2");
    if(btn2.addEventListener){
        //一般现在常用的浏览器将执行  DOM2级事件处理程序
        btn2.addEventListener("click",demo3);
    }else if(btn2.attachEvent){
        //如果是IE8及以下版本将执行 IE事件处理程序
        btn2.attachEvent("onclick",demo3);
    }else{
        //如果是早期的一些浏览器将执行 0级事件处理程序");
        btn.onclick=demo3();
    }
    function demo3(){
        alert("各种浏览器兼容的事件处理写法");
    }
</script>

对于这种事件处理方法感觉很像jquery中的处理方式，事件方法会触发匹配元素的事件，或将函数绑定到所匹配元素的某个事件。

以后把 js代码置于单独的 .js 文件中，那页面的代码量就少多了，而且十分清晰,易于维护！

这是我在CSDN上的第一篇博客，在以前做的一些项目中，遇到的很多问题也是通过这个平台解决的，最近可以闲下来总结总结并学习一些新的内容，突然有个想法，写个博客边总结边学习，代码跟文字分离的也比较清晰，顺便分享一下自己的学习心得和经验。希望从现在开始，不管是在学校还是工作之后，都能定期做一个总结，对自己有一个新的认识。

马上也大四了，希望我的求职历程也能顺利吧！嗯就这样了。。。。