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 相关文章推荐
不错的JS中变量相关的细节分析
Aug 13 Javascript
IE和firefox浏览器的event事件兼容性汇总
Dec 06 Javascript
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
js 获取元素在页面上的偏移量的方法汇总
Apr 13 Javascript
javascript cookie的简单应用
Feb 24 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
js实现手机web图片左右滑动效果
Dec 29 Javascript
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 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
第十一节 重载 [11]
2006/10/09 PHP
PHP4中实现动态代理
2006/10/09 PHP
PHP 文件系统详解
2012/09/13 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
PHP正则验证字符串是否为数字的两种方法并附常用正则
2019/02/27 PHP
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
js multiple全选与取消全选实现代码
2012/12/04 Javascript
js遍历、动态的添加数据的小例子
2013/06/22 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
jQuery 遍历函数详解
2015/07/05 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
详解ES6 export default 和 import语句中的解构赋值
2019/05/28 Javascript
Python自动连接ssh的方法
2015/03/07 Python
Python中max函数用法实例分析
2015/07/17 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
python实现简易版计算器
2020/06/22 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
利用python如何处理nc数据详解
2018/05/23 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
使用matlab 判断两个矩阵是否相等的实例
2020/05/11 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
代领报检证委托书范本
2014/10/11 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
初中语文教学反思范文
2016/03/03 职场文书
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python