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

本文实例讲述了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程序设计有所帮助。

(0)

相关推荐

  • 原生JS绑定滑轮滚动事件兼容常见浏览器

    滑轮滚动页面的事件在网页特效中进场遇到,但是在不同浏览器下的实现方式又不同.下面我实现的方法,兼容常见浏览器. function getData(event){ var e = event || window.event; //获取滚动距离(FF每次滚动 data为3或者-3,其他为120或者-120) var data = e.detail || e.wheelDelta; alert(data); } //IE之外的绑定事件方法 if(document.addEventListener &&a

  • js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)

    复制代码 代码如下: /** Event handler for mouse wheel event.          *鼠标滚动事件          */          var wheel = function(event) {              var delta = 0;              if (!event) /* For IE. */                  event = window.event;              if (event.w

  • 兼容各大浏览器的JavaScript阻止事件冒泡代码

    这里仅仅是一个简单代码demo,因为时间问题并未做深入研究,因为今天做项目时要用到阻止事件冒泡的内容,找了好多才找到一个可以使用的,特记录之. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>阻止事件冒泡</title> <scr

  • javascript 兼容各个浏览器的事件

    调用事件: 事件对象 什么是事件对象?在触发dom上的事件是都会产生一个事件对象event.例如鼠标点击的时候,自己就会产生比如点击的类型啊 还要那个元素发出的 dom 事件对象   type 属性用于获取事件对象, target属性 用于获取事件目标,stopPropagation()方法 阻止事件冒泡 preventDefault阻止事件的默认行为 IE中的事件对象  type 属性 用于获取事件对象, srcElement属性 用于获取事件目标 cancelBubble属性  用于阻止事件

  • javaScript事件机制兼容【详细整理】

    [添加事件机制]  addEventListener  和  attachEvent [W3C] addEventListener('click' , function(){alert('Hello World')} ,false )  //W3C规范添加事件(IE8及以上不兼容):  第一个参数为事件类型 ,第二个为事件程序 ,第三个 false为事件冒泡,true为事件捕获 [IE] attachEvent('onclick',function(){alert('Hello World')}

  • IE8的JavaScript点击事件(onclick)不兼容的解决方法

    博客园闪存分页是用JavaScript生成的,今天发现在IE8下点击页码不能翻页,翻页操作是在当前页码的onclick事件中进行的. 开始代码是这么写的: 复制代码 代码如下: var a = document.createElement("a");a.setAttribute("onclick", this.ClickFunctionName + "(" + pageIndex + ");Pager.SetCurrent("

  • javascript浏览器兼容教程之事件处理

    1. window.event [分析说明]先看一段代码 复制代码 代码如下: function et(){ alert(event);//IE: [object]} 以上代码在IE运行的结果是[object],而在Firefox无法运行. 因为在IE中event作为window对象的一个属性可以直接使用,但是在Firefox中却使用了W3C的模型,它是通过传参的方法来传播事件的,也就是说你需要为你的函数提供一个事件响应的接口. [兼容处理]添加对event判断,根据浏览器的不同来得到正确的ev

  • javascript 按键事件(兼容各浏览器)

    第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown.onkeypress和onkeyup这三个事件句柄.一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时候的keyup. 在这3种事件类型中,keydown和keyup比较底层,而keypress比较高级.这里所谓的高级是指,当用户按下shift + 1时,keypress是对这个按键事件进行解析后

  • 纯JavaScript实现的兼容各浏览器的添加和移除事件封装

    //事件处理兼容各种浏览器,采用能力检测方法,所谓能力检测,就是有能力就做,没有能力就不做 //定义一个处理事件的对象,兼容各种浏览器,dom2级事件处理和ie事件,如果这两个事件都不兼容,就采用dom0级处理 var eventUtil ={ addEvent:function(element,type,handler){ if (element.addEventListener) { //非IE浏览器采用dom2级事件处理,type为事件类型如:click,handler为事件处理函数,fa

  • JSP中用回车监听按钮事件兼容火狐 IE等主流浏览器

    复制代码 代码如下: <script> // 兼容FF document.onkeydown=keyListener; function keyListener(e){ e = e ? e : event; if(e.keyCode == 13){ onsubmit(); } } </script>

  • js获取键盘按键响应事件(兼容各浏览器)

    复制代码 代码如下: <script type="text/javascript" language=JavaScript charset="UTF-8">document.onkeydown=function(event){var e = event || window.event || arguments.callee.caller.arguments[0];if(e && e.keyCode==27){ // 按 Esc //要做的

随机推荐