JavaScript：事件对象

最新推荐文章于 2023-02-02 19:45:02 发布

A_山水子农

最新推荐文章于 2023-02-02 19:45:02 发布

阅读量567

点赞数

分类专栏： JavaScript JavaScript 文章标签： javascript 事件对象 DOM中的事件对象 IE中的事件对象跨浏览器的事件对象

本文链接：https://blog.csdn.net/qq_27626333/article/details/51584949

版权

JavaScript 同时被 2 个专栏收录

55 篇文章 2 订阅

订阅专栏

JavaScript

46 篇文章 10 订阅

订阅专栏

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

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.οnclick=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.οnclick=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.οnclick=handler;
btn.οnmοuseοver=handler;
btn.οnmοuseοut=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.οnclick=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.οnclick=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>

A_山水子农

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript：事件对象

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。1、DOM中的事件对象DOM中的事件对象Click Mevar btn=document.getElementById("myBtn");//DOM0级方法btn.onclick=function(event){ alert(event.type);//"clic
复制链接

扫一扫