javascript事件——event对象

1、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;
			}
       },
	//返回对event对象的引用，在使用该方法时必须假设有一个事件对象传入事件处理程序中，并且将其传给该方法
	getEvent:function(event){
		return event ? event : window.event;
		},
	/*返回事件目标，因为事件处理程序的作用域时根据指定它的方式来确定的，因此不能认为this（注册事件的元素）会始终等于该事件的目标（直接执行事件的元素），只有在eventPhase==2时，this==target*/
	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;
			}
       },
	//阻止事件流，由于IE不支持事件捕获，所以在这里该方法只能用来阻止事件冒泡
	stopPropagation:function(event){
		if(event.stopPropagation){
			event.stopPropogation();//可以阻止冒泡和捕获
			}
		else{
			event.cancelBubble = true;
			}
		}
	};

//使用方法
var btn;
btn.onclick = function(event){
	event = EventUtil.getEvent(event);//获取event对象，使用后面三个方法时，必须将这行代码放在开头
	var targrt = EventUtil.getTarget(event);//获取事件目标
	EventUtil.preventDefault(event);//取消事件默认行为
	EventUtil.stopPropagation(event);//阻止事件流
	};

2、DOM中的事件对象和IE中的事件对象也有相同的属性type，返回被触发的事件类型，可以使用在一个函数处理多个事件时

var handler = function(event){
	switch(event.type){
		case "click" :
		   alert("clicked");
		   break;
		
		case"mouseover" :
		   alert("mouseover");
		   break;
		
		case"mouseout" :
		   event.target.style.background = "red";
		   break;
		}
	};
EventUtil.addHandler(btn,"click",handler);
EventUtil.addHandler(btn,"mouseover",handler);
EventUtil.addHandler(btn,"mouseout",handler);