详解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 相关文章推荐
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
Feb 04 Javascript
浅析node.js中close事件
Nov 26 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
Dec 03 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 Javascript
JavaScript之面向对象_动力节点Java学院整理
Jun 29 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
React-intl 实现多语言的示例代码
Nov 03 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/10/23 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
Convert Seconds To Hours
2007/06/16 Javascript
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
JS date对象的减法处理实现代码
2010/12/28 Javascript
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
以一段代码为实例快速入门Python2.7
2015/03/31 Python
python opencv实现图片旋转矩形分割
2018/07/26 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
Python3爬楼梯算法示例
2019/03/04 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
Django后端接收嵌套Json数据及解析详解
2019/07/17 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
英语专业毕业生自我鉴定
2013/11/09 职场文书
运动会稿件50字
2014/02/17 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
python基于机器学习预测股票交易信号
2021/05/25 Python
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python
Python开发五子棋小游戏
2022/04/28 Python