javascript 跨浏览器事件处理

<div id="myDiv" style="width:100px; height:100px; border:1px solid #f00;"></div>

 

<script>
/**
 * 跨浏览器事件处理
 **/
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.srcElement;
    },
    //删除默认事件
    preventDefault:function(event){
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue = 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;s
        }
    },
    //阻止事件冒泡
    stopPropagation:function(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        }
    },
    //获取相关元素(mouseove和mouserout事件可能用的到)
    getRelatedTarget:function(event){
        if(event.relatedTarget){
            return event.relatedTarget;
        }else if(event.toElement){
            return event.toElement; 
        }else if(event.fromElement){
            return event.fromElement;
        }else{
            return null;
        }
    }
};
/**
 * 使用方法实例
 **/
var myDiv = document.getElementById("myDiv");
//添加事件
EventUtil.addHandler(myDiv, 'click',addEventFun);
//删除事件
//EventUtil.removeHandler(myDiv, 'click', addEventFun);
function addEventFun(event){
    //获取事件对象event
    var eventName = EventUtil.getEvent(event);
    console.log(eventName);
    //获取元素对象
    var elementTarget = EventUtil.getTarget(event);
    console.log(elementTarget);
    //删除默认事件
    EventUtil.preventDefault(event);//比如a的href跳转
    //阻止事件冒泡
    EventUtil.stopPropagation(event);//比如body也有click事件,则不执行body的click
    
}
</script>