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 相关文章推荐
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
微信小程序 本地数据读取实例
Apr 27 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
基于复选框demo(分享)
Sep 27 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 Javascript
js运算符的一些特殊用法
Jul 29 Javascript
javascript中函数的写法实例代码详解
Oct 28 Javascript
Vue实现返回顶部按钮实例代码
Oct 21 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中JSON数据操作
2015/07/01 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
PHP基于单例模式编写PDO类的方法
2016/09/13 PHP
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
JavaScript中的lastIndexOf()方法使用详解
2015/06/06 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
详解AngularJS controller调用factory
2017/05/19 Javascript
Angular2 组件交互实例详解
2017/08/24 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
Python中安装easy_install的方法
2018/11/18 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
营销与策划个人求职信
2013/09/22 职场文书
给导游的表扬信
2014/01/10 职场文书
洗发露广告词
2014/03/14 职场文书
年终总结会议主持词
2014/03/17 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
财务整改报告范文
2014/11/05 职场文书
校运会广播稿
2015/08/19 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
感谢信的技巧及范例
2019/05/15 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书