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程序设计有所帮助。