详解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 相关文章推荐
jQuery 技巧小结
Apr 02 Javascript
jquery等宽输出文字插件使用介绍
Sep 18 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 Javascript
JavaScript变量的作用域全解析
Aug 14 Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 Javascript
理解javascript中DOM事件
Dec 25 Javascript
详解js中class的多种函数封装方法
Jan 03 Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 Javascript
详解从新建vue项目到引入组件Element的方法
Aug 29 Javascript
linux 后台运行node服务指令方法
May 23 Javascript
JavaScript模板引擎原理与用法详解
Dec 24 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 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
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
VFP与其他应用程序的集成
2006/10/09 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
php二分查找二种实现示例
2014/03/12 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
PHP中UNIX时间戳和日期间的转换与计算实例
2014/11/19 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
2013/02/02 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
WebPack配置vue多页面的技巧
2018/05/15 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
关于微信公众号开发无法支付的问题解决
2018/12/28 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
layui前端时间戳转化实例
2019/11/15 Javascript
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python re模块的高级用法详解
2018/06/06 Python
Python3 requests模块如何模仿浏览器及代理
2020/06/15 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
日语翻译个人求职的自我评价
2013/10/14 职场文书
化学教师教学反思
2014/01/17 职场文书
奖学金个人总结
2015/03/04 职场文书
三八节活动简报
2015/07/20 职场文书
Python MNIST手写体识别详解与试练
2021/11/07 Python
Golang实现可重入锁的示例代码
2022/05/25 Golang