详解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 相关文章推荐
Javascript var变量隐式声明方法
Oct 19 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
Dec 22 Javascript
基于jquery的滚动鼠标放大缩小图片效果
Oct 27 Javascript
javaScript(JS)替换节点实现思路介绍
Apr 17 Javascript
用box固定长宽实现图片自动轮播js代码
Jun 09 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
详解基于webpack2.x的vue2.x的多页面站点
Aug 21 Javascript
JavaScript+CSS相册特效实例代码
Sep 07 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
详解使用uni-app开发微信小程序之登录模块
May 09 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下使用无限生命期Session的方法
2007/03/16 PHP
PHP similar_text 字符串的相似性比较函数
2010/05/26 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
Linux php 中文乱码的快速解决方法
2016/05/13 PHP
php将print_r处理后的数据还原为原始数组的解决方法
2016/11/02 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
ASP中Sub和Function的区别说明
2020/08/30 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
BootStrap实用代码片段之一
2016/03/22 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
Vue3为什么这么快
2020/09/23 Javascript
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
python监控文件或目录变化
2016/06/07 Python
Python协程的用法和例子详解
2017/09/09 Python
Python实现的HMacMD5加密算法示例
2018/04/03 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
学python最电脑配置有要求么
2020/07/05 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
管理信息系学生的自我评价
2014/01/11 职场文书
邮政员工辞职信
2014/01/16 职场文书
保健品市场营销方案
2014/03/31 职场文书
员工辞职信怎么写
2015/02/27 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python
详解MySQL中的主键与事务
2021/05/27 MySQL
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android
你真的会用Mysql的explain吗
2022/03/31 MySQL