详解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,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
Apr 15 Javascript
JavaScript 以对象为索引的关联数组
May 19 Javascript
Jquery AJAX 用于计算点击率(统计)
Jun 30 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
浅谈JSON.parse()和JSON.stringify()
Jul 14 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
Apr 24 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
微信小程序如何获取手机验证码
Nov 04 Javascript
微信小程序关键字变色实现代码实例
Dec 13 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
第七节--类的静态成员
2006/11/16 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
常用的9个JavaScript图表库详解
2017/12/19 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
Python pandas库中的isnull()详解
2019/12/26 Python
Python 私有属性和私有方法应用场景分析
2020/06/19 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
FC-Moto丹麦:欧洲最大的摩托车服装和头盔商店之一
2019/08/20 全球购物
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
英语专业毕业生自荐信
2013/10/28 职场文书
初中数学教学反思
2014/01/16 职场文书
高一军训决心书
2015/02/05 职场文书
欢送领导祝酒词
2015/08/12 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL