详解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 相关文章推荐
仿微博字符限制效果实现代码
Apr 20 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
Mar 08 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
Vue插槽原理与用法详解
Mar 05 Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 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 遍历XP文件夹下所有文件
2008/11/27 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
vue基于mint-ui的城市选择3级联动的示例
2017/10/25 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
使用Bootstrap做一个朝代历史表
2019/12/10 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
一个超级简单的python web程序
2014/09/11 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
新年快乐! python实现绚烂的烟花绽放效果
2019/01/30 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
python 解决pycharm运行py文件只有unittest选项的问题
2020/09/01 Python
荷兰之家英文站:Holland at Home
2016/10/26 全球购物
戴尔英国官网:Dell英国
2017/05/27 全球购物
巴基斯坦购物网站:Goto
2019/03/11 全球购物
资料员的岗位职责
2013/11/20 职场文书
国旗下的演讲稿
2014/05/08 职场文书
优秀护士先进事迹
2014/05/08 职场文书
基层工作经验证明样本
2014/11/16 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
学校隐患排查制度
2015/08/05 职场文书
七年级思品教学反思
2016/02/20 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书
整理Python中常用的conda命令操作
2021/06/15 Python
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android