脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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>

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

您可能感兴趣的文章:

相关文章

  • 前端插件之Bootstrap Dual Listbox使用教程

    前端插件之Bootstrap Dual Listbox使用教程

    这篇文章主要介绍了前端插件之Bootstrap Dual Listbox使用教程，本文给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-07-07
  • 兼容IE和FF的js脚本代码小结（比较常用）

    兼容IE和FF的js脚本代码小结（比较常用）

    做BS开发就难免会用到javascript，而每个浏览器对javascript的支持有不同。这就需要我们程序员去兼容他们下面是兼容IE和FF的js脚本做法和分解（部分选自网上，经本人整理），希望对大家有帮助。
    2010-12-12
  • Js中async/await的执行顺序详解

    Js中async/await的执行顺序详解

    随着async/await正式纳入ES7标准，越来越多的人开始研究据说是异步编程终级解决方案的 async/await。下面这篇文章主要给大家介绍了关于Js中async/await执行顺序的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-09-09
  • 使用javascript为网页增加夜间模式

    使用javascript为网页增加夜间模式

    如何给Web页面增加夜间模式功能? 其实所谓的夜间模式就是在页面上增加一个透明的遮罩层，但是遮罩层会挡住页面元素， 解决方法是 添加DIV，给DIV的outline属性一个很大的outline-width值，用outline的边框作为遮罩，这样既能正常点击页面元素，又能达到夜间模式的效果
    2014-01-01
  • 原生JS实现风箱式demo,并封装了一个运动框架(实例代码)

    原生JS实现风箱式demo,并封装了一个运动框架(实例代码)

    下面小编就为大家带来一篇原生JS实现风箱式demo,并封装了一个运动框架(实例代码)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • JavaScript仿百度图片浏览效果

    JavaScript仿百度图片浏览效果

    这篇文章主要为大家详细介绍了JavaScript仿百度图片浏览效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-11-11
  • uniapp实现日期时间选择器

    uniapp实现日期时间选择器

    这篇文章主要为大家详细介绍了uniapp实现日期时间选择器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10
  • javascript:;与javascript:void(0)使用介绍

    javascript:;与javascript:void(0)使用介绍

    有时候我们在编写js过程中，需要触发事件而不需要返回值，那么就可能需要这样的写法
    2013-06-06
  • 关于js中removeEventListener取消事件监听的坑

    关于js中removeEventListener取消事件监听的坑

    许多入前端不久的人都会遇到removeEventListener无法清除监听的情况,下面这篇文章主要给大家介绍了关于js中removeEventListener取消事件监听的坑,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • bootstrapValidator bootstrap-select验证不可用的解决办法

    bootstrapValidator bootstrap-select验证不可用的解决办法

    这篇文章主要为大家详细介绍了bootStrapValidator和bootStrap-select验证不可用的解决办法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01

最新评论