跨浏览器事件处理程序

原创于 2019-08-04 14:34:17 发布 · 102 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js事件

本文介绍了一种跨浏览器的事件处理程序实现方法，通过封装事件添加和移除的通用函数，确保在不同浏览器环境下（如Chrome、Firefox、IE）都能正确绑定和解除事件监听，特别针对按钮点击事件进行了示例说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>跨浏览器事件处理程序</title>
   </head>
   <body>
       <button id="myBtn">点击我</button>
       <script type="text/javascript">
           var EventUtil = {
               addHandler:function(element,type,handler){
                   //绑定事件
                   //Chrome Firefox IE9等 addEventListener
                   //IE8及IE8以下的浏览器 attachEvent
                   if(element.addEventListener){
                       element.addEventListener(type,handler,false);
                   }else if (element.attachEvent) {
                       element.attachEvent("on"+ type,handler);
                   } else{
                       element["on"+type] = handler
                   }
               },
               removeHandler: function(element,type,handler){
                   //移除事件
                   //Chrome Firefox IE9等
                   //IE8及IE8以下的浏览器
                   if(element.removeEventListener){
                       element.removeEventListener(type,handler,false);
                   }else if (element.detachEvent) {
                       element.detachEvent("on"+type,handler);
                   } else{
                       element["on"+type] = handler
                   }
               }
           }
           var btn = document.getElementById("myBtn");
           var handler = function(){
               alert("Clicked");
           }
           EventUtil.addHandler(btn,"click",handler);
       //EventUtil.removeHandler(btn,"click",handler);
       </script>
   </body>
</html>