详解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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(4)
Dec 23 Javascript
js原型链原理看图说明
Jul 07 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
Jul 01 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
JavaScript实现模态对话框实例
Jan 13 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 21 Javascript
element中table高度自适应的实现
Oct 21 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
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
图片自动缩小 点击放大
2008/07/07 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
继续学习javascript闭包
2015/12/03 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
2016/10/25 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
Python实现获取某天是某个月中的第几周
2015/02/11 Python
用Python编写生成树状结构的文件目录的脚本的教程
2015/05/04 Python
Python中的一些陷阱与技巧小结
2015/07/10 Python
在python的类中动态添加属性与生成对象
2016/09/17 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
python获取指定时间差的时间实例详解
2017/04/11 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
Feelunique德国官方网站:欧洲最大的在线美容零售商
2019/07/20 全球购物
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
校三好学生主要事迹
2014/01/11 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL
python blinker 信号库
2022/05/04 Python