在浏览器众多的今天，跨浏览器显得尤为重要
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>事件的跨浏览器</title> 6 </head> 7 <body> 8 <input type="button" value="按钮" id='btn1'> 9 </body> 10 <script type="text/javascript"> 11 var btn1=document.getElementById('btn1'); 12 function test(){ 13 alert('OK可以添加事件'); 14 } 15 //将能力检测封装到一个对象当中 16 //能力检测为判断你能用哪个事件处理就用那个事件处理 17 var p={ 18 //定义一个添加事件的函数 19 addshijian:function(element,shijian,hanshu){ 20 //↓判断如果浏览器可以使用DOM2级事件处理就用DOM2级 21 if(element.addEventListener){ 22 element.addEventListener(shijian,hanshu,false); 23 24 //↓判断如果浏览器可以使用IE事件处理就是IE事件处理 25 }else if(element.attachEvent){ 26 element.attachEvent('on'+shijian,hanshu); 27 28 //↓以上都不是那么使用DOM0级事件处理 29 }else{ 30 element['on'+shijian]=hanshu; 31 } 32 } 33 } 34 //↓通过创建的对象调用事件处理，传入适当的参数 35 p.addshijian(btn1,'click',test); 36 </script> 37 </html>