JavaScript Event对象详解及属性使用示例

Event对象概述

Event对象用于封装事件发生时的状态信息，包括触发事件的元素、键盘按键状态、鼠标坐标及按钮状态等。当用户执行如点击按钮等操作时，浏览器会在内存中自动生成对应的Event对象。

Event对象具有时效性，仅在事件触发及处理的整个过程中有效存在。

部分Event属性仅对特定类型的事件有意义。例如，fromElement和toElement属性专门用于onmouseover和onmouseout事件，在其他事件中可能无意义或返回空值。

Event对象属性列表

Event对象包含以下主要属性：

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

altKey属性

1. altKey属性

该属性用于检测Alt键当前的状态。

语法格式为：event.altKey

可能的返回值如下：

若Alt键处于按下状态，返回TRUE；否则返回FALSE。该属性为只读。

button属性

2. button属性

该属性用于检测用户按下了哪个鼠标按键。

语法格式为：event.button

可能的返回值如下：

0 表示没有按键。

1 表示按下鼠标左键。

2 表示按下鼠标右键。

3 表示同时按下鼠标左键和右键。

4 表示按下鼠标中间键（滚轮）。

5 表示同时按下鼠标左键和中间键。

6 表示同时按下鼠标右键和中间键。

7 表示同时按下所有鼠标按键。

此属性仅适用于onmousedown、onmouseup和onmousemove事件。对于其他事件（如onclick），无论鼠标状态如何，该属性均返回0。

cancelBubble属性

3. cancelBubble属性

该属性用于判断是否阻止事件向父级元素冒泡传播。

语法格式为：

event.cancelBubble = [Boolean值]

可能的返回值如下：

这是一个可读写的布尔值：

TRUE 表示阻止事件向父级元素冒泡，即不被上层元素的事件处理程序控制。

FALSE 表示允许事件向父级元素冒泡，这是默认值。

示例说明：

以下代码演示了当在图片上点击（onclick）时，如果同时按下了Shift键，则通过设置cancelBubble为true来取消父级元素（body）上onclick事件触发的showSrc()函数执行。

 
<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">

clientX与clientY属性

4. clientX属性

该属性返回鼠标指针在窗口客户区（视口）内的X坐标值。

语法格式为：event.clientX

注意事项：

这是一个只读属性。这意味着，你只能通过它来读取鼠标的当前位置，而不能通过修改它来改变鼠标位置。

5. clientY属性

该属性返回鼠标指针在窗口客户区（视口）内的Y坐标值。

语法格式为：event.clientY

注意事项：

这是一个只读属性。这意味着，你只能通过它来读取鼠标的当前位置，而不能通过修改它来改变鼠标位置。

ctrlKey属性

6. ctrlKey属性

该属性用于检测Ctrl键当前的状态。

语法格式为：event.ctrlKey

可能的返回值如下：

若Ctrl键处于按下状态，返回TRUE；否则返回FALSE。该属性为只读。

fromElement属性

7. fromElement属性

该属性用于检测onmouseover和onmouseout事件发生时，鼠标指针离开的那个元素。参考：18.toElement。

语法格式为：event.fromElement

注意事项：

这是一个只读属性。

keyCode属性

8. keyCode属性

该属性用于检测键盘事件对应的内部编码。此属性适用于onkeydown、onkeyup和onkeypress事件。

语法格式为：event.keyCode = [keyCode]

可能的返回值如下：

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

offsetX与offsetY属性

9. offsetX属性

该属性用于检查鼠标位置相对于触发事件的对象在水平方向上的偏移坐标。

语法格式为：event.offsetX

10. offsetY属性

该属性用于检查鼠标位置相对于触发事件的对象在垂直方向上的偏移坐标。

语法格式为：event.offsetY

propertyName属性

11. propertyName属性

该属性用于设置或返回元素中发生变化的属性名称。

语法格式为：event.propertyName = [sProperty]

可能的返回值如下：

sProperty是一个字符串，用于指定或返回触发事件的元素在事件中发生变化的属性名称。

该属性为可读写的，没有默认值。

注意事项：

你可以通过监听onpropertychange事件来获取propertyName的值。

示例说明：

以下示例通过onpropertychange事件，弹出一个对话框显示propertyName的值。

 
<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>

returnValue属性

12. returnValue属性

该属性用于设置或检查从事件中返回的值，从而控制事件的默认行为。

语法格式为：event.returnValue = [Boolean]

可能的返回值如下：

true 表示事件中的值被正常返回。

false 表示取消源对象上事件的默认操作。

screenX与screenY属性

13. screenX属性

该属性用于检测鼠标相对于用户屏幕的水平位置坐标。

语法格式为：event.screenX

注意事项：

这是一个只读属性。这意味着，你只能通过它来读取鼠标的当前位置，而不能通过修改它来改变鼠标位置。

14. screenY属性

该属性用于检测鼠标相对于用户屏幕的垂直位置坐标。

语法格式为：event.screenY

注意事项：

这是一个只读属性。这意味着，你只能通过它来读取鼠标的当前位置，而不能通过修改它来改变鼠标位置。

shiftKey属性

15. shiftKey属性

该属性用于检测Shift键当前的状态。

语法格式为：event.shiftKey

可能的返回值如下：

若Shift键处于按下状态，返回TRUE；否则返回FALSE。该属性为只读。

srcElement与srcFilter属性

16. srcElement属性

该属性返回触发当前事件的DOM元素。此属性为只读，具体示例见本文开头部分。

语法格式为：event.srcElement

17. srcFilter属性

该属性返回触发onfilterchange事件的滤镜对象。此属性为只读。

语法格式为：event.srcFilter

toElement属性

18. toElement属性

该属性用于检测onmouseover和onmouseout事件发生时，鼠标指针进入的那个元素。

语法格式为：event.toElement

注意事项：

这是一个只读属性。

示例说明：以下代码演示了当鼠标移到按钮上时，弹出一个对话框，显示“mouse arrived”。

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

type属性

19. type属性

该属性返回事件的名称字符串。

语法格式为：event.type

注意事项：

返回的事件名不包含“on”前缀，例如，对于onclick事件，type属性返回的值为click。

该属性为只读。

x与y属性

20. x属性

该属性返回鼠标相对于CSS中设置了position属性的最近父级元素的X轴坐标。如果没有这样的父级元素，则默认以BODY元素作为参考对象。

语法格式为：event.x

注意事项：

如果事件触发后，鼠标移出窗口范围，则返回值为-1。

这是一个只读属性。这意味着，你只能通过它来读取鼠标的当前位置，而不能通过修改它来改变鼠标位置。

21. y属性

该属性返回鼠标相对于CSS中设置了position属性的最近父级元素的Y轴坐标。如果没有这样的父级元素，则默认以BODY元素作为参考对象。

语法格式为：event.y

注意事项：

如果事件触发后，鼠标移出窗口范围，则返回值为-1。

这是一个只读属性。这意味着，你只能通过它来读取鼠标的当前位置，而不能通过修改它来改变鼠标位置。