JavaScript：事件之事件对象
在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。
1、DOM中的事件对象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM中的事件对象</title>
</head>
<body>
<input type="button" value="Click Me" id="myBtn"/>
<a href="#" id="myLink">Click Me</a>
<script>
var btn=document.getElementById("myBtn");
//DOM0级方法
btn.onclick=function(event){
alert(event.type);//"click"
//其事件处理程序当前正处理时间的那个元素
alert(event.currentTarget.nodeName);//"INPUT"
//事件目标
alert(event.target.nodeName);//"INPUT"
//取消事件的进一步捕获或冒泡
event.stopPropagation();
}
//DOM2级方法
btn.addEventListener("click",function(event){
alert(event.type);//"click"
},false);
//取消事件的默认行
var link=document.getElementById("myLink");
link.onclick=function(event){
alert("myLink")
//取消事件的默认行为
event.preventDefault();
}
//一个函数处理多个事件
var handler=function(event){
switch(event.type){
case "click" :
alert("Clicked");
break;
case "mouseover":
event.target.style.backgroundColor="red";
break;
case "mouseout":
event.target.style.backgroundColor="green";
break;
}
};
btn.onclick=handler;
btn.onmouseover=handler;
btn.onmouseout=handler;
</script>
</body>
</html>
2、IE中的事件对象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE中的事件对象</title>
</head>
<body>
<input type="button" value="Click Me" id="myBtn"/>
<a href="#" id="myLink">Click Me</a>
<script>
var btn=document.getElementById("myBtn");
//DOM0级方法
btn.onclick=function(){//没有event参数
var event=window.event;//event对象作为window对象的一个属性存在
alert(event.type);//"click"
//事件目标
alert(event.srcElement.nodeName);//"INPUT"
//取消事件的进一步捕获或冒泡
event.cancelBubble=true;
}
//DOM2级方法
btn.attachEvent("onclick",function(event){
alert(event.type);//"click"
});
//取消事件的默认行
var link=document.getElementById("myLink");
link.onclick=function(){
var event=window.event;//event对象作为window对象的一个属性存在
alert("myLink")
//取消事件的默认行为
event.returnValue=false;
}
</script>
</body>
</html>
3、跨浏览器的事件对象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>跨浏览器的事件对象</title>
</head>
<body>
<input type="button" value="Click Me" id="myBtn"/>
<a href="http://www.baidu.com" id="myLink">Click Me</a>
<script>
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{
element["on"+type]=handler;//DOM0级
}
},//此处的","千万别忘记，EventUtil是对象。
//删除事件
removeHandler:function(element,type,handler){
if(element.removeEventListener){//DOM2级
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){//IE
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;//DOM0级
}
},
//返回event对象的引用
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;
}
}
}
var btn=document.getElementById("myBtn");
var handler=function(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
alert(target.nodeName);//"INPUT"
setTimeout(function(){
EventUtil.removeHandler(btn,"click",handler);
alert("删除事件处理程序");
},1000);
};
EventUtil.addHandler(btn,"click",handler);
var link=document.getElementById("myLink");
var handler=function(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
alert(target.nodeName);//"INPUT"
EventUtil.preventDefault(event);
};
EventUtil.addHandler(link,"click",handler);
</script>
</body>
</html>