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

 更新时间:2016年06月20日 11:19:24   作者:cherry   我要评论
这篇文章主要介绍了JS事件添加和移出的兼容写法,结合实例形式分析了javascript针对不同浏览器实现实现添加与移除事件的相关技巧与使用方法,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

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

相关文章

  • ie 调试javascript的工具

    ie 调试javascript的工具

    其实,没那么强大的,不过,聊胜于无吧,并且还算管用,要是有谁再完善它就好了……
    2009-04-04
  • js与applet相互调用的方法

    js与applet相互调用的方法

    这篇文章主要介绍了js与applet相互调用的方法,结合实例形式分析了js调用java的applet以及java调用js的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • Opacity.js

    Opacity.js

    Opacity.js...
    2007-01-01
  • 理解Javascript_12_执行模型浅析

    理解Javascript_12_执行模型浅析

    大家有没有想过,一段javascript脚本从载入浏览器到显示执行都经过了哪些流程,其执行次序又是如何。本篇博文将引出'javascript执行模型'的概念,并带领大家理解javascript在执行时的处理机制。
    2010-10-10
  • layer弹出层父子页面事件相互调用方法

    layer弹出层父子页面事件相互调用方法

    今天小编就为大家分享一篇layer弹出层父子页面事件相互调用方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • js实现左右两侧浮动广告

    js实现左右两侧浮动广告

    这篇文章主要为大家详细介绍了js实现左右两侧浮动广告,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • JS实战篇之收缩菜单表单布局

    JS实战篇之收缩菜单表单布局

    这篇文章主要介绍了JS实战篇之收缩菜单表单布局的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-12-12
  • JS实现的ajax和同源策略(实例讲解)

    JS实现的ajax和同源策略(实例讲解)

    下面小编就为大家分享一篇JS实现的ajax和同源策略的实例讲解,具有很好的参考价值,希望对大家有所帮助
    2017-12-12
  • 基于javascript的在火狐里面强制换行字符

    基于javascript的在火狐里面强制换行字符

    火狐也不知道为什么,自己功能上,样式上面,都无法让其强制换行,这里用JS来实现火狐里面强制换行的方法。
    2010-06-06
  • 微信小程序自定义导航栏实例代码

    微信小程序自定义导航栏实例代码

    这篇文章主要给大家介绍了关于微信小程序自定义导航栏的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-04-04

最新评论