事件对象

1.什么是事件对象？

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象包含着所有与事件有关的信息。

2.DOM中的事件对象

(1)兼容DOM的浏览器会将一个event对象传人到事件处理程序中。

var btn=document.getElementById("myBtn");
btn.οnclick=function(event){
       alert(event.type);        //click
}
btn.addEventLitener("click",function(event){
       alert(event.type);      //click
},false);

(2)event对象的部分属性和方法

currentTarget //其事件处理程序当前正在处理事件的那个元素

preventDefault() //取消事件的默认行为

stopPropagation() //取消事件进一步捕获或者冒泡

type //被触发事件的类型

target //事件目标

(3)阻止特定事件的默认行为

var link=document.getElementById("myBtn");
link.οnclick=function(){
      event.preventDefault();    //阻止链接跳转
};

(4)取消进一步的事件捕获或冒泡

var btn=document.getElementById("myBtn");
btn.οnclick=function(){
        alert("clicked");
        event.stopPropagation();
};
document.body.click=function(){
        alert("Body clicked");      //被取消了
}

3.IE中的事件对象

在使用DOM0级方法添加事件处理程序时，event对象作为window对象的一个属性存在。

var bBtn=document.getElementById("myBtn");
btn.οnclick=function(){
        var event=window.event;
         alert(event.type);       //click
};

如果事件处理程序是使用attachevent()添加的，那么就会有一个event对象作为参数被传入事件出路程序函数中

var bBtn=document.getElementById("myBtn");
bBtn.attachEvent("onclick",function(event){
        alert(event.type);       //click
});

IE的event对象的方法及属性

cancelBubble //默认值为false，但将其设置为true就可以取消事件冒泡

retuenValue //默认为true，将其设置为false就可以取消事件的默认行为

srcElement //事件的目标

type //被触发的事件类型

4.跨浏览器的事件对象

var EventUtil={
		addHandler:function(element,type,handler){
			if(element.addEventListener){		//DOM2
				element.addEventListener(type,handler,false);
			}else if(element.attachEvent){		//IE
				element.attachEvent("on"+type,handler)
			}else{								//DOM0
				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;
			}
		},
		stopPropagation:function(event){	//取消冒泡
			if(event.stopPropagation){
				event.stopPropagation();
			}else{
				event.cancelBubble=true;
			}
		}
	};