addEventListener和attachEvent区别

addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；但是，IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数。所以，这种绑定事件的方法必须要处理浏览器兼容问题。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <style type="text/css">

     </style>

 </head>

 <body>

 <button id="myBtn">点击</button>

 <p id="demo"></p>

 <script type="text/javascript">

     var E = {

         /***

          * 在主流浏览器中

          * element.addEventListener(type, fn, false);

          * @param element 文档节点 document window XMLHttpRequest

          * @param type 字符串,事件名称,不含"on~", 比如"click", "mousemove", "keydown"

          * @param useCapture 是否使用捕捉，一般用 false.

          * 在低版本的IE浏览器中

          * element.attachEvent("onclick", fn);

          *  @param type 字符串,事件名称,含"on~",比如"onclick", "onmousemove", "onkeydown"

          *  @param fn 实现了EventListener接口或者是JavaScript中的函数

          */

         add: function (element, type, fn) {

             if(element.addEventListener){

                 element.addEventListener(type, fn, false);//第三个参数默认值为false,所以如果不写其值默认为false

             }else if(window.attachEvent){

                 element.attachEvent("onclick", fn);

             }

         }

     };

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

     function showText(){

         document.getElementById("demo").innerHTML = "你点击了这个按钮!";

     }

     E.add(element, 'click', showText);

 </script>

 </body>

 </html>

秒客网

addEventListener和attachEvent区别

相关文章