<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>跨浏览器事件处理程序</title> <!-- 针对IE8及以下版本 --> </head> <body> <script> //添加事件 function addHandler(element,type,handler){ //element:事件对象 //type:事件类型 //handler:事件句柄 if (element.addEventListener){ //判断浏览器是否支持该语句（chrome/opera/IE9支持） element.addEventListener(type,handler,false); }else if(element.attachEvent){ //判断浏览器是否支持该语句（IE8及以下版本支持） element.attachEvent("on"+type,handler); }else{ element["on"+type]=handler;//以上两种都不支持时，执行DOM0级事件 } } //移除事件 function removeHandler(element,type,handler){ if (element.removeEventListener){ //判断浏览器是否支持该语句（chrome/opera/IE9支持） element.removeEventListener(type,handler,false); }else if(element.detachEvent){ //判断浏览器是否支持该语句（IE8及以下版本支持） element.detachEvent("on"+type,handler); }else{ element["on"+type]=handler;//以上两种都不支持时，执行DOM0级事件 } } </script> <!-- 测试效果 --> <button id="btn">点击</button><!-- 创建按钮 --> <script> var btn=document.getElementById("btn");//获取按钮 //事件句柄 var tan=function (){ alert("弹框"); } addHandler(btn,"click",tan);//调用添加事件函数 removeHandler(btn,"click",tan);//调用移除事件函数 </script> </body> </html>