详解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 相关文章推荐
Ext.MessageBox工具类简介
Dec 10 Javascript
基于jquery的15款幻灯片插件
Apr 10 Javascript
js动画(animate)简单引擎代码示例
Dec 04 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
VueJs使用Amaze ui调整列表和内容页面
Nov 30 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 07 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 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基础学习小结
2011/04/17 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
php获取url参数方法总结
2014/11/13 PHP
php文件缓存类汇总
2014/11/21 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
使用javascript过滤html的字符串(注释标记法)
2013/07/08 Javascript
javascript完美拖拽的实现方法
2013/09/29 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
Python 基础教程之闭包的使用方法
2017/09/29 Python
Python 利用内置set函数对字符串和列表进行去重的方法
2018/06/29 Python
python gdal安装与简单使用
2019/08/01 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
介绍一下代理模式(Proxy)
2014/10/17 面试题
比较一下entity bean和session bean
2013/12/27 面试题
中英文自我评价常用句型
2013/12/19 职场文书
致跳高运动员广播稿
2014/01/13 职场文书
安全检查管理制度
2014/02/02 职场文书
个人综合鉴定材料
2014/05/23 职场文书
2015年学校总务工作总结
2015/07/20 职场文书
理解python中装饰器的作用
2021/07/21 Python
业余无线电通联Q语
2022/02/18 无线电