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