JS事件添加和移出的兼容写法示例


Posted in Javascript onJune 20, 2016

本文实例讲述了JS事件添加和移出的兼容写法。分享给大家供大家参考,具体如下:

var EventUtil = {
  addHandler : function (element , type, handler {
     if ( element.addEventListener){
        element.addEventListener(type, handler, false);
      }else if ( element.attachEvent) {
        element.attachEvent("on"+type,handler);
      }else {
         element["on" + type] = handler;
      }
    },
  getEvent : function (event){
      return event ? event : window.event;
     },
   preventDefault : function(event){
      if(event.preventDefault){
         event.preventDefault();
      }else{
         event.returnValue = false;
      }
   },
  removeHandsler : function (element , type , handler){
     if(element.removeEventListener){
         element.removeEventListener(type , handler , false);
     }else if(element.detachEvent){
         element.detachEvent("on" + type , handler);
     }else{
         element["on" + type] = handler;
     }
    }
   stopPropagation : function(event){
      if(event.stopPropagation){
         event.stopPropagation();
      }else {
          event.cancelBubble = true;
      }
    },
   getRelatedTarget : function(event){
      if(event.relatedTarget){
          return event.relatedTarget;
      }else if (event.toElement){
          return event.toElement;
      }else if(event.fromElement){
          return event.fromElement;
      }esle {
          return null;
       }
    },
    getButton : function (event){
       if(document.implementation.hasFeature("MouseEvents" , "2.0")){
          return event.button;
       }else{
           switch(event.button){
             case 0:
             case 1:
             case 3:
             case 5:
             case 7:
               return 0;
             case 2:
             case 6:
               return 2;
             case 4:
               return 1;
            }
        }
     }
} ;

其中,addHandler 和 removeHandsler 个方法首先都会检测传入的元素中是否存在DOM2级方法.如果存在DOM2级方法,则使用该方法:传入事件类型,事件处理程序函数和第三个参数fasle(表示冒泡阶段). 如果存在的是IE的方法,则采取第二种方案.注意此时的事件类型必须加上"on"前缀.最后一种可能就是使用DOM0级方法(在现代浏览器中,应该不会执行这里的代码). 此时,我们使用的是方括号语法来将属性名指定为事件处理程序,或者将属性设置为null.

可以像下面这样使用EventUtil对象:

var btn = document.getElementById("myBtn");
var handler = function(){
  alert("Clicked");
};
EventUtil.addHandler(btn , "click", handler);
//略去其他代码
EventUtil.removeHandler(btn, "click", handler);

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Flash对联广告的关闭按钮讨论
Jan 30 Javascript
javascript innerHTML使用分析
Dec 03 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
Aug 13 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
Aug 23 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
May 05 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 Javascript
Javascript操作表单实例讲解(下)
Jun 20 #Javascript
jQuery获取多种input值的简单实现方法
Jun 20 #Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 #Javascript
JavaScript操作表单实例讲解(上)
Jun 20 #Javascript
jquery 获取select数组与name数组长度的实现代码
Jun 20 #Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 #Javascript
使用jQuery给input标签设置默认值
Jun 20 #Javascript
You might like
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
在Docker快速部署Node.js应用的详细步骤
2016/09/02 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
JavaScript实现美化滑块效果
2019/05/17 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
vue将data恢复到初始状态 && 重新渲染组件实例
2020/09/04 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
Python 文件和输入输出小结
2013/10/09 Python
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
Python语言实现将图片转化为html页面
2017/12/06 Python
Python正则表达式匹配和提取IP地址
2019/06/06 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
详细分析Python collections工具库
2020/07/16 Python
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
高三毕业生自我鉴定
2013/12/20 职场文书
就业推荐表自我鉴定范文
2014/03/21 职场文书
地质灾害防治方案
2014/05/14 职场文书
医院义诊活动总结
2014/07/04 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
教师工作决心书
2015/02/04 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
golang 实用库gotable的具体使用
2021/07/01 Golang
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技