详解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 相关文章推荐
jQuery contains过滤器实现精确匹配使用方法
Apr 12 Javascript
jquery单行文字向上滚动效果示例
Mar 06 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
Aug 28 Javascript
JS制作类似选项卡切换的年历
Dec 03 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
Vue动态控制input的disabled属性的方法
Jun 26 Javascript
实例讲解vue源码架构
Jan 24 Javascript
JQuery常见节点操作实例分析
May 15 jQuery
vuex分模块后,实现获取state的值
Jul 26 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
Feb 14 Javascript
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
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
php多文件上传实现代码
2014/02/20 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
2007/04/12 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
Python记录详细调用堆栈日志的方法
2015/05/05 Python
python实现二叉树的遍历
2017/12/11 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
Django 用户登陆访问限制实例 @login_required
2020/05/13 Python
Django在Model保存前记录日志实例
2020/05/14 Python
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
网络工程师职业规划
2014/02/10 职场文书
《故乡》教学反思
2014/04/10 职场文书
护士医德考评自我评价
2015/03/03 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python