跨浏览器事件处理程序
Posted vinson-blog
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了跨浏览器事件处理程序相关的知识，希望对你有一定的参考价值。
<!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>
以上是关于跨浏览器事件处理程序的主要内容，如果未能解决你的问题，请参考以下文章
跨浏览器的事件对象-------EventUtil 中的方法及用法