跨浏览器的事件对象

 

在前端开发工作中，由于浏览器兼容性等问题，触发事件对象的方法不同，分为IE和非IE两种。下面主要介绍跨浏览器触发 目标事件、阻止事件的默认行为、阻止事件冒泡 三种方法：

var EventUtil = {
        target : function(e){    //目标事件
            e = e || window.event;
            return  e.target || e.srcElement;
        },
        preventDefault : function(e){    //阻止事件的默认行为
            e = e || window.event;
            if(e.preventDefault){
                e.preventDefault();
            }else{
                e.returnValue = false;
            }
        },
        stopPropagation : function(e){    //阻止事件冒泡
            e = e || window.event;
            if(e.stopPropagation){
                e.stopPropagation();
            }else{
                e.cancelBubble = true;
            }
        },

charCode : function(e){ //取得字符编码
e = e || window.event;
return e.keyCode || e.charCode;
}

    };

以上代码，我们为EventUtil添加了3个方法，我们可以像下面这样使用这些方法：

var div=document.getElementById('div');
div.onclick = function(e){
    var target = EventUtil.target(e);
    alert(target.tagName);
}

document.οnkeydοwn=function(e){
var code=EventUtil.charCode(e);
console.log(code); //按键盘上的键 看效果
}