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 相关文章推荐
JavaScript事件委托用法分析
Jan 24 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
JS实现的最简Table选项卡效果
Oct 14 Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
echarts多条折线图动态分层的实现方法
May 24 Javascript
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
antd Select下拉菜单动态添加option里的内容操作
Nov 02 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
数据库中排序的对比及使用条件详解
2012/02/23 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
React和Vue中监听变量变化的方法
2018/11/14 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
浅谈编码,解码,乱码的问题
2016/12/30 Python
Python使用sorted排序的方法小结
2017/07/28 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
django在开发中取消外键约束的实现
2020/05/20 Python
python 模拟登陆github的示例
2020/12/04 Python
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
印尼在线精品店:Berrybenka.com
2016/10/22 全球购物
自荐信怎么写好
2013/11/11 职场文书
高中毕业自我评价
2014/02/08 职场文书
百日安全活动总结
2014/05/04 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
幼儿园开学报名通知
2015/07/16 职场文书
高一作文之乐趣
2019/11/21 职场文书