Javascript中,event代表事件的状态,专门负责对事件的处理,它的属性和方法能帮助我们完成很多和用户交互的操作。
一、event对象的主要属性和方法:
1.type:事件的类型,就是HTML标签属性中没有“on”前缀之后的字符串,例如“Click”就代表单击事件。
2.srcElement:事件源,就是发生事件的元素。比如<a ></a> a这个链接是事件发生的源头(非IE中用target)
3.button:被按下的鼠标键,0代表没有按键,1代表左键,2代表右键,4代表中间键。按下了多个鼠标键,把这些值叠加。
4.clientX/clientY:事件发生时,鼠标相对于包容窗口的左上角的横、纵坐标。整数值。IE考虑窗口的滚动,所以要想得到事件发生的坐标相对于文档开头的位置,要加上document.body.scrollLeft和document.body.scrollTop。
5.offsetX/offsetY:鼠标指针相对于源元素的位置,可以确定单击Image对象的哪个象素。
6.altKey,ctrlKey,shiftKey:指鼠标事件发生时是否同时按住了Alt、Ctrl或者Shift键。布尔值。
7.keyCode:keydown和keyup事件发生时按键的代码以及keypress事件的Unicode字符。比如event.keyCode=13代表按下了回车键;
8.fromElement、toElement:前者是指代mouseover事件移动过的文档元素,后者指代mouseout事件中鼠标移动到的文档元素。
9.cancelBubble:布尔值,true代表不被上层元素的事件控制,false代表允许被上层元素的事件控制。
10.returnValue:布尔值,false代表阻止浏览器执行默认的事件动作。
11.addEventListener()和removeEventListener("事件类型",对应的方法,boolen):非IE中的监听程序。
12.attachEvent()和detachEvent("事件类型",对应的方法)方法:IE中的监听程序。
注意:在attachEvent()事件执行的时候,this关键字指向的是window对象,而不是发生事件的那个元素。
二、IE的Event对象:是一个全局属性。在IE中,不能把Event对象作为参数传递给事件处理程序,只能用window.event或者event来引用Event对象。因为在IE中,Event是window的一个属性,也就是说event是一个全局变量。
IE中事件的起泡:IE中事件可以沿着包容层次一点点起泡到上层,也就是说,下层的DOM节点定义的事件处理函数,到了上层的节点如果还有和下层相同事件类型的事件处理函数,那么上层的事件处理函数也会执行。例如,<div>标签包含了<a>,如果这两个标签都有 onclick事件的处理函数,那么执行的情况就是先执行<a>标签的onclick事件处理函数,再执行<div>的事件处理函数。如果希望<a>的事件处理函数执行完毕之后,不希望执行上层的<div>的onclick的事件处理函数了,那么就把 cancelBubble设置为false即可。
三、W3C DOM标准中的Event:W3C DOM中的Event对象并不是window全局对象下面的属性,换句话说,event不是全局变量。通常在DOM二级标准中,event作为发生事件的文档对象的属性。Event含有两个子接口,分别是UIEvent和MutationEvent,这两个子接口实现了Event的所有方法和属性,而MouseEvent接口又是UIEvent的子接口,所以实现了UIEvent和Event的所有方法和属性。
1.Event
type:事件类型,和IE类似,但是没有“on”前缀,例如单击事件只是“click”。
target:发生事件的节点。
currentTarget:发生当前正在处理的事件的节点,可能是Target属性所指向的节点,也可能由于捕捉或者起泡,指向Target所指节点的父节点。
eventPhase:指定了事件传播的阶段。是一个数字。
timeStamp:事件发生的时间。
bubbles:指明该事件是否起泡。
cancelable:指明该事件是否可以用preventDefault()方法来取消默认的动作。
preventDefault()方法:取消事件的默认动作;
stopPropagation()方法:停止事件传播。
2.UIEvent
view:发生事件的window对象。
detail:提供事件的额外信息,对于单击事件、mousedown和mouseup事件都代表的是点击次数。
3.MouseEvent
button:鼠标键的状态,0代表左键,1代表中间键,2代表右键(和IE中的button属性代表的意义不一样) altKey、ctrlKey、shiftKey、metaKey:和IE相同,但是IE没有最后一个。
clientX、clientY:和IE相同,但DOM标准中不考虑文档的滚动情况,无论文档滚动到哪里,只要事件发生在窗口左上角,clientX和clientY都是0
screenX、screenY:鼠标指针相对于显示器左上角的位置,如果你想打开新的窗口,这两个属性很重要。
relatedTarget:和IE中的fromElement、toElement类似,除了对于mouseover和mouseout有意义外,其他的事件没什么意义。
四、代码示例(IE浏览器):添加监听程序,通过event对象捕捉鼠标点击时的坐标
<!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 runat="server">
<title>无标题页</title>
</head>
<!--页面加载时添加监听程序,页面卸载时移除监听程序-->
<body id="mybody" onload="attachEvent('onmousedown',getXY)" onunload="detachEvent('onmousedown',getXY)">
<!--用此文本框模拟一幅地图-->
<textarea id="map" style="width: 594px; height: 239px" rows="10" cols="10"></textarea>
<table style="width: 257px; height: 161px">
<tr>
<td colspan="2">第一点:</td>
</tr>
<tr>
<td>X坐标值:</td>
<td>
<input type="text" id="x1Position" tabindex="1" onfocus="focusPosition=1"/>
</td>
</tr>
<tr>
<td>Y坐标值:</td>
<td>
<input type="text" id="y1Position" tabindex="2" onfocus="focusPosition=1"/>
</td>
</tr>
<tr>
<td colspan="2" style="height: 14px">第二点:</td>
</tr>
<tr>
<td>X坐标值:</td>
<td>
<input type="text" id="x2Position" tabindex="3" onfocus="focusPosition=2"/>
</td>
</tr>
<tr>
<td style="height: 26px">Y坐标值:</td>
<td style="height: 26px">
<input type="text" id="y2Position" tabindex="4" onfocus="focusPosition=2"/>
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
document.getElementById("map").onmousedown=getXY; //指明event对象要监控的对象.必须指明该对象,否则下面的e=window.event会为null
var focusPosition=1; //全局变量,焦点标志位
///捕捉鼠标左键按下时的屏幕坐标,自动填入坐标文本框中.并通过焦点变换实现两个坐标点轮换填入
function getXY()
{
var e=window.event;
if((e.button<2)&&(e.type=='mousedown')) //鼠标左键按下时发生
{
if(1==focusPosition)
{
document.getElementById('x1Position').value=e.clientX;
document.getElementById('y1Position').value=e.clientY;
document.getElementById('x2Position').focus();
focusPosition+=1;
}
else if(2==focusPosition)
{
document.getElementById('x2Position').value=e.clientX;
document.getElementById('y2Position').value=e.clientY;
document.getElementById('x1Position').focus();
focusPosition-=1;
}
}
}
</script>
分享到:
相关推荐
《javascript》——event对象与事件
Javascript中的事件--Event对象
本文实例讲述了JavaScript事件对象event用法。分享给大家供大家参考,具体如下: 前面的文章已经介绍了JavaScript为事件指定处理程序的五种方式。 下面继续介绍JavaScript的事件对象event。 事件对象event包含导致...
javascript部分内容第五节 事件的定义 EventTarget 接收事件接口 JS中常用的事件 事件对象 网页中常用坐标
javascript Event对象详解..........................
javascriptEvent对象详解定义.pdf
Javascript小技巧,觉得用来查询JS的事件挺方便,主要是事件源对象event.srcElement.tagName ,event.srcElement.type,捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键event...
一些常用的特效,非常的实用,包括一些javascript中event对象的使用
事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型、鼠标坐标等。 事件对象的属性:格式:event.属性。 一些说明: event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下...
熟练掌握window对象的status、location、name、self、opener属性的使用 Window对象是客户端javascript最高层对象之一,只要打开浏览器窗口,不管该窗口中是否有打开的网页,当遇到BODY、FRAMESET或FRAME元素时,...
event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等。 event对象只在事件发生的过程中才有效。 event的某些属性只对特定的事件有意义。比如,fromElement 和 toElement 属性只对 ...
目标掌握: javascript内置对象 String 对象 Math 对象 Date 对象 浏览器对象 浏览器对象简介 Window Document History Location Screen event
兼容DOM的浏览器会将一个event对象传入到事件处理程序中。event对象包含与创建它的特定事件有关的属性和方法。除法的事件类型不一样,可用的属性方法就不一样。不过,所有的事件都会有下表列出的成员。 下面列出了 2...
6、内置的JavaScript对象: 3 7、处理对象的内置方法: 3 8、用户自定义对象: 4 9、使用IE的Scriptlet: 4 三、Form元素:文本框和按钮 5 1、文本框: 5 2、按钮: 5 3、文本区: 6 4、口令密码: 6 5、确认按钮和...
此类的对象可以触发事件,而其他对象可以绑定到这些事件。 灵感来源 :beer_mug: 的Simple JavaScript Inheritance的原始想法和实现 对Q.Evented Class 的最初想法和实现 我只是提取了类代码并使其独立。 使用类事件...
本文实例讲述了JavaScript常见事件对象与操作。分享给大家供大家参考,具体如下: 触发 DOM 上的事件时,会生成一个事件对象 event,它包含着所有与事件有关的信息,诸如导致事件的元素、事件的类型以及其他与特定...
一旦事件发生,便会生成Event对象,如单击一个按钮,浏览器的内存中就产生相应的 event对象。 event对象只在事件发生的过程中才有效。 event的某些属性只对特定的事件有意义。比如,fromElement 和 toElement 属性只...
window.event对象差异 IE:有window.event对象 FF:没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(event) 获取鼠标当前坐标 IE:event.x和event.y。 FF:event.pageX和event...
event对象:事件源,不管在哪个事件中,只要你操作的那个元素就是事件源 获取事件源: IE:window.event.srcElement 标准下:event.target target.nodeName来判断是哪个标签 代码应用如下: <!DOCTYPE ...