자바스크립트 크로스 브라우저 이벤트 핸들러_javascript 스킬에 대한 자세한 설명-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

자바스크립트 크로스 브라우저 이벤트 핸들러_javascript 스킬에 대한 자세한 설명

May 16, 2016 pm 03:08 PM

이 글에서는 참고용으로 JavaScript 크로스 브라우저 이벤트 처리 메커니즘을 공유합니다.

&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;跨浏览器的事件处理程序&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;input type="button" value="click me" id="myBtn"/&gt;
  &lt;input type="button" value="解除" id="unlisten"/&gt;
  
  &lt;script&gt;
  
    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);
    });
  
  
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;