详解javascript跨浏览器事件处理程序
2016-07-15来源:易贤网

本文为大家分享了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>

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

2026公务员·事业单位培训课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
推荐信息