JavaScript：事件对象

来源：互联网发布：阿里云大厦是做什么的编辑：程序博客网时间：2024/06/10 20:58

在触发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.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>

0 0