详解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 08 Javascript
js计算页面刷新的次数
Jul 20 Javascript
不同浏览器的怪癖小结
Jul 11 Javascript
基于jquery的分页控件(C#)
Jan 06 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
Oct 13 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 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
php5 pdo新改动加载注意事项
2008/09/11 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
JQuery优缺点分析说明
2010/06/09 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
JavaScript字符串对象
2017/01/14 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
2020/08/28 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
跟老齐学Python之复习if语句
2014/10/02 Python
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
复习Python中的字符串知识点
2015/04/14 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
python使用Geany编辑器配置方法
2020/02/21 Python
详解python环境安装selenium和手动下载安装selenium的方法
2020/03/17 Python
python上selenium的弹框操作实现
2020/07/13 Python
10款最佳Python开发工具推荐,每一款都是神器
2020/10/15 Python
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
市场营销个人求职信范文
2014/02/02 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
党员教师群众路线个人整改措施
2014/10/28 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书