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

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

作者: 萘小蒽 | 来源:发表于2019-04-05 07:18 被阅读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);
    

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/sfqhiqtx.html