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

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);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容