详解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-世界上误解最深的语言分析
Aug 12 Javascript
7个Javascript地图脚本整理
Oct 20 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 Javascript
JavaScript更改原始对象valueOf的方法
Mar 19 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
微信小程序 Audio API详解及实例代码
Sep 30 Javascript
基于JavaScript实现随机颜色输入框
Dec 10 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
Vuex简单入门
Apr 19 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
js+canvas实现纸牌游戏
Mar 16 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内核探索:变量概述
2014/01/30 PHP
PHP伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
Linux下快速搭建php开发环境
2017/03/13 PHP
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
js面向对象的写法
2016/02/19 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
微信小程序实现滑动操作代码
2020/04/23 Javascript
[01:44]Ti10举办地公布
2019/08/25 DOTA
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
西雅图的买手店:Totokaelo
2019/10/19 全球购物
给面试官的感谢信
2014/02/01 职场文书
年度考核自我鉴定
2014/02/02 职场文书
可贵的沉默教学反思
2014/02/06 职场文书
写求职信有什么意义
2014/02/17 职场文书
七一建党日演讲稿
2014/09/05 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
MySQL系列之十二 备份与恢复
2021/07/02 MySQL
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers