跨浏览器事件EventUtil

Posted 2020-06-15

<div style="width: 150px; height: 150px; padding: 25px; border:1px solid blue; " id="divBox">
	<p style="width: 100px; height: 100px; padding:25px; border:1px solid red; " id="pBox">
		<span style="width:50px; height:50px; border:1px solid gray; display: block;" id="spanBox">span</span>
	</p>
</div>

var divBox = document.getElementById(‘divBox‘);
var pBox = document.getElementById("pBox");
var spanBox = document.getElementById("spanBox");
function handler(event){
	var target = EventUtil.target(EventUtil.event(event));
	switch(target.id){
			case "divBox":
				alert("this is divBox...");
				break;
			case "pBox":
				alert("this is pBox");
				break;
			case "spanBox":
				alert("this is spanBox...");
				break;

		}
}
EventUtil = {
	addEventListener:function(ele,type,callback,capture){
		if(window.addEventListener){
			ele.addEventListener(type,callback,capture);
		}else if(window.attachEvent){
			ele.attachEvent("on"+type,callback);
		}else{
			ele["on"+type] = callback;
		}
	},
	removeEventListener:function(){
		if(window.removeEventListener){
			ele.removeEventListener(type,callback,capture);
		}else if(window.detachEvent){
			ele.detachEvent("on"+type,callback);
		}else{
			ele["on"+type] = null;
		}
	},
	event:function(event){
		return event = event || window.event;
	},
	target:function(event){
		var target = event.target || event.srcElement;
		return target;
	},
	preventDefault:function(event){
		if(event.preventDefault){
			event.preventDefault();
		}else{
			event.returnValue = false;
		}
	}
}

EventUtil.addEventListener(divBox,"click",handler,false);

以上是本人自己写的，不是很全面，更全面的版本参考以下网址：

http://blog.csdn.net/guoyz_1/article/details/5521008