脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript跨浏览器事件处理

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

 更新时间：2016年03月27日 10:15:22   作者：subying  
这篇文章主要为大家详细介绍了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>

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

您可能感兴趣的文章:

相关文章

  • Java通过WebSocket实现异步导出解决思路

    Java通过WebSocket实现异步导出解决思路

    这篇文章主要介绍了通过WebSocket实现异步导出,本篇文章记录大批量数据导出时间过长,导致接口请求超时问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-01-01
  • 手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现

    手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现

    这篇文章主要介绍了手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • JavaScript手写数组的常用函数总结

    JavaScript手写数组的常用函数总结

    这篇文章主要给大家介绍了关于JavaScript手写数组常用函数的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • JS+CSS实现大气清新的滑动菜单效果代码

    JS+CSS实现大气清新的滑动菜单效果代码

    这篇文章主要介绍了JS+CSS实现大气清新的滑动菜单效果代码,通过鼠标事件结合定时函数实现页面元素动态变换的效果,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • js获得页面的高度和宽度的方法

    js获得页面的高度和宽度的方法

    做一个弹出dialog时用到了取父页面的宽度和高度的方法,需要的朋友可以参考下
    2014-02-02
  • JavaScript获得选中文本内容的方法

    JavaScript获得选中文本内容的方法

    今天希望实现一个，直接在网页上选中文本，点击收藏夹的链接（javascript）即可弹出新窗口（类似“百度搜藏”和“QQ书签”），新窗口中的文本框即显示了选中的文本。
    2008-12-12
  • AutoJs实现刷宝短视频的思路详解

    AutoJs实现刷宝短视频的思路详解

    这篇文章主要介绍了AutoJs实现刷宝短视频的思路详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-05-05
  • javascript中checkbox使用方法简单实例演示

    javascript中checkbox使用方法简单实例演示

    这篇文章通过简单的实例演示了javascript中checkbox使用方法，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 关于页面嵌入swf覆盖div层的问题的解决方法

    关于页面嵌入swf覆盖div层的问题的解决方法

    这篇文章主要介绍了关于页面嵌入swf覆盖div层的问题的解决方法,需要的朋友可以参考下
    2014-02-02
  • 第五篇Bootstrap 排版

    第五篇Bootstrap 排版

    使用bootstrap的排版特性可以创建标题，段落，列表及其它内联元素。本文重点给大家介绍Bootstrap 排版 知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
    2016-06-06

最新评论