详解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 相关文章推荐
11个用于提高排版水平的基于jquery的文字效果插件
Sep 14 Javascript
JS 实现Json查询的方法实例
Apr 12 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
JS 日期与时间戮相互转化的简单实例
Jun 22 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
jQuery模拟下拉框选择对应菜单的内容
Mar 07 Javascript
Vue2.x中的父子组件相互通信的实现方法
May 02 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
Jun 28 Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 Javascript
element-ui 实现响应式导航栏的示例代码
May 08 Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 Javascript
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 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之第二天
2006/10/09 PHP
PHP聊天室技术
2006/10/09 PHP
PHP伪静态写法附代码
2008/06/20 PHP
PHP 身份证号验证函数
2009/05/07 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
2017/01/12 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
ES6 Set结构的应用实例分析
2019/06/26 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
Python操作MySQL简单实现方法
2015/01/26 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
python异常处理和日志处理方式
2019/12/24 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
python list的index()和find()的实现
2020/11/16 Python
吉尔德利巧克力公司:Ghirardelli Chocolate Company
2019/03/27 全球购物
毕业生个人投资创业计划书
2014/01/04 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
放假通知范文
2015/04/14 职场文书
入党积极分子群众意见
2015/06/01 职场文书
小学运动会报道稿
2015/07/22 职场文书
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android
PHP 时间处理类Carbon
2022/05/20 PHP
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS