跨浏览器的事件对象

虽然IE的事件对象与DOM的事件对象存在差异，但是IE事件对象中所包含的信息和能力，与DOM事件对象是相同的，只是表现形式不同而已，通过映射的方式，我们可以实现兼容IE和DOM事件对象的事件对象.

　　

var eventUtil = {
	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;
		}
	};

	stopPropagation : function(event){
		if(event.stopPropagation){
			event.stopPropagation();
		}else{
			event.cancelBubble = true;
		}
	};


};

　　当使用一个DOM兼容的浏览器时，event 变量仅仅是传入并被返回，在IE中event参数将是undefined ，因此window.event将会被返回，所以采用eventUtil.getEvent()方法无论在dom还是IE上event返回值都是可用的。

　　同理第二个方法，getTarge()方法，先检测event对象的target属性，如果存在，则返回targe，若为IE浏览器则返回srcElement属性。保证兼容性。

btn.onclick = function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
};

　　第三个方法，preventDefault ()方法，当event对象传入时，先检测event对象的preventDefault()方法是否可用，若可用则调用preventDefault方法，若不可用将event的returnValue 设置为false。

　　例如：

　　

var link = document.getElementById(“myLink”);
     link.onclick = function(event){
     event = EventUtil.getEvent(event);
     EventUtil.preventDefault(event);
};

　　这段代码阻止了一个link标签的默认行为，event对象来自于EventUtil的getEvent方法的返回值 并作为preventDefault()方法的传入参数。

　　第四个方法stopPropagation(),用同样的方法，首先尝试DOM方法，之后尝试cancelBubble属性，例如下面的代码：

　　

var btn = document.getElementById(“myBtn”);
btn.onclick = function(event){
alert(“Clicked”);
event = EventUtil.getEvent(event);
EventUtil.stopPropagation(event);
};
document.body.onclick = function(event){
alert(“Body clicked”);
};

　　记得这个方法可能阻止事件在浏览器的冒泡阶段 或者 同时阻止事件在浏览器的冒泡和捕获阶段。　　

　　

转载于:https://www.cnblogs.com/MrBackKom/archive/2012/06/24/2559983.html