二、跨浏览器事件对象(ie兼容模式中的event对象判断)

2019-04-05  本文已影响0人  萘小蒽

DOM和ie中的对象不同,但基于他们之间的相似性可以定制出跨浏览器的方案。

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;
   },
   getTarget:function(event){ //事件目标元素
         return event.target ? event.target : event.srcElement;
   },
   preventDefault:function(event){//取消事件默认行为
         if(event.preventDefault){
              event.preventDefault()
          }else{
              event.preventDefault = false
          }
   },
   removeHandler: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] =  null;
         }
    },
   stopPropagation:function(event){//阻止事件冒泡
         if(event.stopPropagation){
              event.stopPropagation()
          }else{
              event.cancelBubble = false
          }
   },
}

上面的EventUtil.addHandler方法用法。
EventUtil.removeHandler同理,但是要注意移除的方法不能是匿名函数

var btn = document.getElementById('myBtn');
function handler(){
   console.log("handler")
}
EventUtil.addHandler(btn , click , handler);
上一篇下一篇

猜你喜欢

热点阅读