javascript event对象

转载 2007年10月10日 15:27:00

参考文献(1):http://hqmank.blog.bokee.net/bloggermodule/blog_viewblog.do?id=236780

event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等。
event对象只在事件发生的过程中才有效。
event的某些属性只对特定的事件有意义。比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。
例子

下面的例子检查鼠标是否在链接上单击,并且,如果shift键被按下,就取消链接的跳转。
code<HTML>
<HEAD><TITLE>Cancels Links</TITLE>
<SCRIPT LANGUAGE="JScript">
function cancelLink() {
    if (window.event.srcElement.tagName == "A" && window.event.shiftKey)
    window.event.returnValue = false;
}
</SCRIPT>
<BODY onclick="cancelLink()">


下面的例子在状态栏上显示鼠标的当前位置。
code<BODY onmousemove="window.status = 'X=' + window.event.x + ' Y=' + window.event.y">


属性:

altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX,
screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y

1.altKey
描述:
检查alt键的状态。

语法:
event.altKey

可能的值:
当alt键按下时,值为 TRUE ,否则为 FALSE 。只读。


2.button
描述:
检查按下的鼠标键。

语法:
event.button

可能的值:
0 没按键
1 按左键
2 按右键
3 按左右键
4 按中间键
5 按左键和中间键
6 按右键和中间键
7 按所有的键

这个属性仅用于onmousedown, onmouseup, 和 onmousemove 事件。对其他事件,不管鼠标状态如何,都返回 0(比如onclick)。

3.cancelBubble
描述:
检测是否接受上层元素的事件的控制。

语法:
event.cancelBubble[ = cancelBubble]

可能的值:
这是一个可读写的布尔值:

TRUE 不被上层原素的事件控制。
FALSE 允许被上层元素的事件控制。这是默认值。

例子:
下面的代码片断演示了当在图片上点击(onclick)时,如果同时shift键也被按下,就取消上层元素(body)上的事件onclick所引发的showSrc()函数。

code<SCRIPT LANGUAGE="JScript">
function checkCancel() {
    if (window.event.shiftKey)
    window.event.cancelBubble = true;
}
function showSrc() {
    if (window.event.srcElement.tagName == "IMG")
    alert(window.event.srcElement.src);
}
</SCRIPT>
<BODY onclick="showSrc()">
<IMG onclick="checkCancel()" SRC="sample.gif">

 

4.clientX
描述:
返回鼠标在窗口客户区域中的X坐标。

语法:
event.clientX

注释:
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。


5.clientY
描述:
返回鼠标在窗口客户区域中的Y坐标。

语法:
event.clientY

注释:
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。


6.ctrlKey
描述:
检查ctrl键的状态。

语法:
event.ctrlKey

可能的值:
当ctrl键按下时,值为 TRUE ,否则为 FALSE 。只读。


7.fromElement
描述:
检测 onmouseover 和 onmouseout 事件发生时,鼠标所离开的元素。 参考:18.toElement

语法:
event.fromElement

注释:
这是个只读属性。


8.keyCode
描述:
检测键盘事件相对应的内码。
这个属性用于 onkeydown, onkeyup, 和 onkeypress 事件。

语法:
event.keyCode[ = keyCode]


可能的值:
这是个可读写的值,可以是任何一个Unicode键盘内码。如果没有引发键盘事件,则该值为 0 。


9.offsetX
描述:
检查相对于触发事件的对象,鼠标位置的水平坐标

语法:
event.offsetX


10.offsetY
描述:
检查相对于触发事件的对象,鼠标位置的垂直坐标

语法:
event.offsetY


11.propertyName
描述:
设置或返回元素的变化了的属性的名称。

语法:
event.propertyName [ = sProperty ]

可能的值:
sProperty 是一个字符串,指定或返回触发事件的元素在事件中变化了的属性的名称。
这个属性是可读写的。无默认值。

注释:
你可以通过使用 onpropertychange 事件,得到 propertyName 的值。

例子:
下面的例子通过使用 onpropertychange 事件,弹出一个对话框,显示 propertyName 的值。

code<HEAD>
<SCRIPT>
function changeProp(){
    btnProp.value = "This is the new VALUE";
}

function changeCSSProp(){
    btnStyleProp.style.backgroundColor = "aqua";
}
</SCRIPT>
</HEAD>
<BODY>
<P>The event object property propertyName is
used here to return which property has been
altered.</P>

<INPUT TYPE=button ID=btnProp onclick="changeProp()"
VALUE="Click to change the VALUE property of this button"
onpropertychange='alert(event.propertyName+" property has changed value")'>
<INPUT TYPE=button ID=btnStyleProp
onclick="changeCSSProp()"
VALUE="Click to change the CSS backgroundColor property of this button"
onpropertychange='alert(event.propertyName+" property has changed value")'>
</BODY>

 

12.returnValue
描述:
设置或检查从事件中返回的值

语法:
event.returnValue[ = Boolean]

可能的值:
true 事件中的值被返回
false 源对象上事件的默认操作被取消

例子见本文的开头。


13.screenX
描述:
检测鼠标相对于用户屏幕的水平位置

语法:
event.screenX


注释:
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。


14.screenY
描述:
检测鼠标相对于用户屏幕的垂直位置

语法:
event.screenY

注释:
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。


15.shiftKey
描述:
检查shift键的状态。

语法:
event.shiftKey

可能的值:
当shift键按下时,值为 TRUE ,否则为 FALSE 。只读。


16.srcElement
描述:
返回触发事件的元素。只读。例子见本文开头。

语法:
event.srcElement


17.srcFilter
描述:
返回触发 onfilterchange 事件的滤镜。只读。

语法:
event.srcFilter


18.toElement
描述:
检测 onmouseover 和 onmouseout 事件发生时,鼠标所进入的元素。 参考:7.fromElement

语法:
event.toElement

注释:
这是个只读属性。

例子:下面的代码演示了当鼠标移到按钮上时,弹出一个对话框,显示“mouse arrived”

code<SCRIPT>
function testMouse(oObject) {
    if(oObject.contains(event.toElement)) {
        alert("mouse arrived");
    }
}
</SCRIPT>
:
<BUTTON ID=oButton onmouseover="testMouse(this)">Mouse Over This.</BUTTON>

 

19.type
描述:
返回事件名。

语法:
event.type

注释:
返回没有“on”作为前缀的事件名,比如,onclick事件返回的type是click
只读。


20. x
描述:
返回鼠标相对于css属性中有position属性的上级元素的x轴坐标。如果没有css属性中有position属性的上级元素,默认以BODY元素作为参考对象。

语法:
event.x

注释:
如果事件触发后,鼠标移出窗口外,则返回的值为 -1
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。


21. y
描述:
返回鼠标相对于css属性中有position属性的上级元素的y轴坐标。如果没有css属性中有position属性的上级元素,默认以BODY元素作为参考对象。

语法:
event.y

注释:
如果事件触发后,鼠标移出窗口外,则返回的值为 -1
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。



 参考文献2:http://blog.csdn.net/EndAll/archive/2006/12/22/1453054.aspx

Javascript的Event对象用来描述Javascript的事件,它主要作用于IE4和NN4以后的各个浏览器版本中。Event代表事件状 态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状态。一旦事件发生,便会生成Event对象,如单击一个按钮,浏览器的内存中就产生相应的 event对象。

  IE对事件的引用

  在IE4以上版本中,event对象作为window属性访问:window.envent。其中引用的window部分是可选的.因此脚本就像全局引用一样来对待event对象:

  event.propertyName

  evnet对象成员表:

  下面的表格列出了 event 对象引出的成员。请单击左侧的标签来选择你想要查看的成员类型。

对象
dataTransfer 提供了对于预定义的剪贴板格式的访问,以便在拖曳操作中使用。

集合
bookmarks 返回捆绑到当前事件所影响的行上的 ActiveX&reg; 数据对象(ADO)书签的集合。
boundElements 返回页面上所有绑定到给定数据集的所有元素的集合。

属性
Abstract 使用 event 对象获取高级流重定向器(ASX)文件中项目横幅的 Abstract 内容。
altKey 设置或获取 Alt 键的状态。
altLeft 设置或获取左 Alt 键的状态。
Banner 使用 event 对象获取高级流重定向器(ASX)文件中项目的 Banner 内容。
button 设置或获取用户所按的鼠标按钮。
cancelBubble 设置或获取当前事件是否要在事件句柄中向上冒泡。
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。
contentOverflow 获取表明文档处理当前 LayoutRect 对象后是否包含附加的内容。
ctrlKey 设置或获取 Ctrl 键的状态。
ctrlLeft 设置或获取左 Ctrl 键的状态。
dataFld 设置或获取 oncellchange 事件影响的数据列。
fromElement 设置或获取事件发生时激活或鼠标将要离开的对象。
keyCode 设置或获取与导致事件的按键关联的 Unicode 按键代码。
MoreInfo 通过 event 对象获取高级流重定向器(ASX)文件中项目横幅的 MoreInfo 内容。
nextPage 获取打印模板中下页的位置。
offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
propertyName 设置或获取对象上发生更改的属性名称。
qualifier 设置或获取由数据源对象提供的数据成员的名称。
reason 设置或获取数据源对象的数据传输结果。
recordset 从数据源对象设置或获取对默认数据集的引用。
repeat 获取 onkeydown 事件是否正在重复。
returnValue 设置或获取事件的返回值。
saveType 当 oncontentsave 触发时获取剪贴板类型。
screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
shiftKey 设置或获取 Shift 键的状态。
shiftLeft 设置或获取左 Shift 键的状态。
srcElement 设置或获取触发事件的对象。
srcFilter 设置或获取触发 onfilterchange 事件的滤镜对象。
srcUrn 获取触发事件的行为的统一资源名称(URN)。
toElement 设置或获取用户要将鼠标指针移动指向的对象的引用。
type 从 event 对象中获取事件名称。
wheelDelta 设置或获取滚轮按钮滚动的距离和方向。
x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标。
y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标。


注释

event 对象仅在事件中可用──这意味着,你可以在事件句柄中使用该对象,但不能在其它代码中使用。

尽管所有事件属性都可通过所有的 event 对象访问,但是在某些事件中某些属性可能无意义。例如,fromElement 和 toElement 属性仅当处理 onmouseover 和 onmouseout 事件时有意义。

在 Microsoft Visual Basic&reg; 脚本版本(VBScript)中,你必须通过 window 对象访问 event 对象。

此对象在 Microsoft&reg; Internet Explorer 4.0 的脚本中可用。

示例

下面的例子使用了 event 对象来决定用户单击的位置是否在链接上,并且避免在 SHIFT 键按下时导航到链接。

<HTML>
<HEAD><TITLE>取消链接</TITLE>
<SCRIPT LANGUAGE="JScript">
function cancelLink() {
if (window.event.srcElement.tagName == "A" && window.event.shiftKey)
window.event.returnValue = false;
}
</SCRIPT>
<BODY onclick="cancelLink()">

要使Event对象各个属性或方法都能实现,应选择IE5.5以上版本。 

JS基础——事件对象event

事件为什么会是对象呢?先了解一下事件处理 一、事件处理    JS在事件处理函数中提供了事件对象,帮助处理鼠标和键盘事件。同时还可以修改一些事件的捕获和冒泡流的函数。 事件处理分...
  • liuwengai
  • liuwengai
  • 2016年10月08日 12:59
  • 1410

JavaScript中的Event事件对象详解

JavaScript中的Event事件对象详解
  • muguli2008
  • muguli2008
  • 2016年10月07日 17:36
  • 2962

【BOM操作】JavaScript中的event对象之总结

Event属性和方法:  1. type:事件的类型,如onlick中的click;  2. srcElement/target:事件源,就是发生事件的元素;  3. button:...
  • itpinpai
  • itpinpai
  • 2015年08月08日 12:32
  • 1098

《javascript》——event对象与事件

  • 2013年08月26日 09:02
  • 314KB
  • 下载

浅谈JavaScript的事件对象event

事件对象event包含导致事件的元素、事件的类型以及其他与特定事件相关的信息。 1、DOM中的事件对象 属性/方法 类型 说明 bubbles Boolean 表明事件...
  • zhouziyu2011
  • zhouziyu2011
  • 2017年03月24日 17:38
  • 222

Javascript的Event对象详解

Event属性和方法: type:事件的类型,如onlick中的click;srcElement/target:事件源,就是发生事件的元素;button:声明被按下的鼠标键,整数,1代表左键,2...
  • ebw123
  • ebw123
  • 2012年09月14日 01:10
  • 430

javascript event(事件对象)详解

1. 事件对象     1. 事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 什么时...
  • liuwengai
  • liuwengai
  • 2016年10月08日 12:58
  • 228

javascript event(事件对象)详解

javascript event(事件对象)详解
  • qq_37212162
  • qq_37212162
  • 2017年11月22日 10:29
  • 62

javascript之event对象

注意:以下给出的是在IE下的event事件说明,如果应用在非IE下可能会出现兼容性问题,需要结合具体的应用环境,使用兼容性的函数来处理 1.altKey 描述: 检查alt键的状态。 语法: ev...
  • u012152619
  • u012152619
  • 2014年12月12日 08:58
  • 1203

JavaScript 学习之Event对象

Event对象
  • havedream_one
  • havedream_one
  • 2015年10月31日 09:23
  • 281
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript event对象
举报原因:
原因补充:

(最多只允许输入30个字)