详解javascript跨浏览器事件处理程序

前端技术 2023/09/08 JavaScript

本文为大家分享了javascript跨浏览器事件处理机制，供大家参考，具体内容如下

<!doctype html>
<html lang=\"en\">
<head>
  <meta charset=\"UTF-8\">
  <title>跨浏览器的事件处理程序</title>
</head>
<body>
  <input type=\"button\" value=\"click me\" id=\"myBtn\"/>
  <input type=\"button\" value=\"解除\" id=\"unlisten\"/>
 
  <script>
 
    function $(id){
      return document.getElementById(id);
    }
 
    var EventUtil={
      fnCount:0
      ,fnData:{}
      ,addHandler:function(element,type,handler){
        this.fnCount++;
        handler.fid = this.fnCount;
        var _fn = handler;
        handler = function(){
          _fn.call(element);
        };
        this.fnData[this.fnCount] = handler;
 
        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){
        handler = this.fnData[handler.fid];
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent){
            element.detachEvent(\"on\"+type,handler);
        }else{
            element[\"on\"+type]=null;
        }
      }
    }
 
    var btn=$(\"myBtn\");
    var unbtn = $(\'unlisten\');
    var bindFn1=function(){
      alert(this.id);
    };
    var bindFn2=function(){
      alert(\'2\');
    };
 
    EventUtil.addHandler(btn,\"click\",bindFn1);
    EventUtil.addHandler(btn,\"click\",bindFn2);
    //EventUtil.removeHandler(btn,\"click\",bindFn1);
    EventUtil.addHandler(unbtn,\"click\",function(){
      EventUtil.removeHandler(btn,\"click\",bindFn1);
    });
 
 
  </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助。

本文地址：https://www.stayed.cn/item/22763

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案