JavaScript：事件对象
2016-06-04 16:28
489 查看
在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。
1、DOM中的事件对象
下面列出了 2 级 DOM 事件标准定义的属性。
下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法：
2、IE中的事件对象
3、跨浏览器的事件对象
1、DOM中的事件对象
下面列出了 2 级 DOM 事件标准定义的属性。
| 属性 | 描述 |
| bubbles | 返回布尔值，指示事件是否是起泡事件类型。 |
| cancelable | 返回布尔值，指示事件是否可取消事件的默认动作。 |
| currentTarget | 返回其事件监听器触发该事件的元素。 |
| eventPhase | 返回事件传播的当前阶段。 |
| target | 返回触发此事件的元素（事件的目标节点）。 |
| timeStamp | 返回事件生成的日期和时间。 |
| type | 返回当前 Event 对象表示的事件的名称。 |
下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法：
| 方法 | 描述 |
| initEvent() | 初始化新创建的 Event 对象的属性。 |
| preventDefault() | 通知浏览器不要执行与事件关联的默认动作。 |
| stopPropagation() | 不再派发事件。 |
<!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中的事件对象
| 属性 | 描述 |
| cancelBubble | 如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。 |
| returnValue | 如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle， 可以取消发生事件的源元素的默认动作。 |
| srcElement | 对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。 |
| x,y | 事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。 |
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 