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


Posted in Javascript onMarch 27, 2016

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

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

Javascript 相关文章推荐
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
Sep 10 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 Javascript
Jquery使用val方法读写value值
May 18 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
Bootstrap Chart组件使用教程
Apr 28 Javascript
es6系列教程_ Map详解以及常用api介绍
Sep 25 Javascript
vue 循环加载数据并获取第一条记录的方法
Sep 26 Javascript
Vue实现本地购物车功能
Dec 05 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 Javascript
vue 数据双向绑定的实现方法
Mar 04 Vue.js
js事件处理程序跨浏览器解决方案
Mar 27 #Javascript
基于javascript实现九九乘法表
Mar 27 #Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 #Javascript
JS中改变this指向的方法(call和apply、bind)
Mar 26 #Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 #Javascript
jquery中validate与form插件提交的方式小结
Mar 26 #Javascript
javascript实现方法调用与方法触发小结
Mar 26 #Javascript
You might like
thinkPHP中volist标签用法示例
2016/12/06 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
浅谈javascript中的作用域
2012/04/07 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
javascript获取所有同类checkbox选项(实例代码)
2013/11/07 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
jQuery简单实现提交数据出现loading进度条的方法
2016/03/29 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
js replace()去除代码中空格的实例
2017/02/14 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
vue 指令之气泡提示效果的实现代码
2018/10/18 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
2019/12/04 Python
浅析Python __name__ 是什么
2020/07/07 Python
法国家具及室内配件店:home24
2017/01/21 全球购物
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
介绍一下grep命令的使用
2015/06/12 面试题
应届毕业生的个人自我鉴定
2013/10/24 职场文书
办公室主任职责范本
2014/03/07 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
扬尘污染防治方案
2014/06/15 职场文书
2014年国庆节演讲稿
2014/09/19 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
圣诞节开幕词
2015/01/29 职场文书
销售员岗位职责
2015/02/10 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
大学开学感言
2015/08/01 职场文书
如何起草一份正确的合伙创业协议书?
2019/07/04 职场文书