详解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 相关文章推荐
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 Javascript
javascript框架设计之框架分类及主要功能
Jun 23 Javascript
详解Javascript中DOM的范围
Feb 13 Javascript
vue双向绑定简要分析
Mar 23 Javascript
微信小程序教程系列之新建页面(4)
Apr 17 Javascript
详解使用Node.js 将txt文件转为Excel文件
Jul 05 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
Aug 12 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
Sep 14 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
使用vue构建多页面应用的示例
Oct 22 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中变量及部分适用方法
2008/03/27 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
PHP中让curl支持sock5的代码实例
2015/01/21 PHP
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
WordPress中设置Post Type自定义文章类型的实例教程
2016/05/10 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
jQuery获取file控件中图片的宽高与大小
2016/08/04 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
小程序中的箭头函数的具体使用
2020/06/19 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
Python读写unicode文件的方法
2015/07/10 Python
python连接mysql实例分享
2016/10/09 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
Python: glob匹配文件的操作
2020/12/11 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
英国床垫在线:Mattress Online
2016/12/07 全球购物
教师节表彰会主持词
2015/07/06 职场文书