addEventListener和attachEvent区别
addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；但是，IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数。所以，这种绑定事件的方法必须要处理浏览器兼容问题。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 8 </style> 9 </head> 10 <body> 11 <button id="myBtn">点击</button> 12 <p id="demo"></p> 13 <script type="text/javascript"> 14 var E = { 15 /*** 16 * 在主流浏览器中 17 * element.addEventListener(type, fn, false); 18 * @param element 文档节点 document window XMLHttpRequest 19 * @param type 字符串,事件名称,不含"on~", 比如"click", "mousemove", "keydown" 20 * @param useCapture 是否使用捕捉，一般用 false. 21 * 在低版本的IE浏览器中 22 * element.attachEvent("onclick", fn); 23 * @param type 字符串,事件名称,含"on~",比如"onclick", "onmousemove", "onkeydown" 24 * @param fn 实现了EventListener接口或者是JavaScript中的函数 25 */ 26 add: function (element, type, fn) { 27 if(element.addEventListener){ 28 element.addEventListener(type, fn, false);//第三个参数默认值为false,所以如果不写其值默认为false 29 }else if(window.attachEvent){ 30 element.attachEvent("onclick", fn); 31 } 32 } 33 }; 34 var element = document.getElementById("myBtn"); 35 function showText(){ 36 document.getElementById("demo").innerHTML = "你点击了这个按钮!"; 37 } 38 E.add(element, 'click', showText); 39 </script> 40 </body> 41 </html>
