JavaScript window.event 对象属性详解与用法指南
本文深入解析 JavaScript 中 window.event 对象的各项属性，包括 altKey、button、cancelBubble、clientX/Y、ctrlKey、fromElement、keyCode、offsetX/Y、propertyName、returnValue、screenX/Y、shiftKey、srcElement、srcFilter、type、x 和 y。通过具体代码示例，展示如何在不同事件（如 onmouseover、onmousedown、onpropertychange 等）中获取鼠标位置、按键状态及触发元素，帮助开发者更好地处理前端交互逻辑。
window.event 对象概述
event 对象用于封装事件发生时的状态信息，例如触发该事件的元素、鼠标的坐标位置以及键盘按键的状态等。
该对象仅在事件触发期间有效，事件结束后即不可用。
部分属性仅对特定类型的事件有意义。例如，fromElement 和 toElement 属性专门用于 onmouseover 和 onmouseout 事件。
基础应用示例
示例场景
以下示例演示如何检查鼠标是否在链接元素上单击，并在按下 Shift 键时阻止链接跳转。
<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()">
以下示例演示如何在浏览器状态栏显示鼠标的实时坐标。
<BODY onmousemove="window.status = 'X=' + window.event.x + ' Y=' + window.event.y">
event 属性详解
属性列表：
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 事件。对于其他事件（如 onclick），无论鼠标状态如何，该属性均返回 0。
3.cancelBubble
属性描述：
用于检测是否阻止事件向父级元素冒泡。
语法格式：
event.cancelBubble[ = cancelBubble]
返回值说明：
这是一个可读写的布尔值：
TRUE 表示阻止事件冒泡至父级元素。
FALSE 表示允许事件冒泡至父级元素，此为默认值。
示例场景：
以下代码片段演示了在图片元素上点击（onclick）时，如果同时按下了 Shift 键，则阻止父级元素（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">
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
属性描述：
返回与键盘事件相对应的 Unicode 内码。
此属性适用于 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 的值。
<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”。
<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 轴坐标。如果没有包含 position 属性的上级元素，则默认以 BODY 元素作为参考对象。
语法格式：
event.x
注意事项：
如果事件触发后，鼠标移出窗口外，则返回值为 -1。
这是一个只读属性。这意味着，你只能通过它来获取鼠标的当前位置，而不能通过它来修改鼠标的位置。
21. y
属性描述：
返回鼠标相对于 CSS 属性中包含 position 属性的上级元素的 Y 轴坐标。如果没有包含 position 属性的上级元素，则默认以 BODY 元素作为参考对象。
语法格式：
event.y
注意事项：
如果事件触发后，鼠标移出窗口外，则返回值为 -1。
这是一个只读属性。这意味着，你只能通过它来获取鼠标的当前位置，而不能通过它来修改鼠标的位置。
总结与扩展资源
上述 Event 对象在实际工作中提供了很大帮助，因此值得深入掌握。近期在研究 AJAX 调用 WebService 时遇到了文件路径问题，这通常是因为新建项目模板不同导致 WebService 格式存在差异。目前仍在探索解决方案，以下提供一个学习 AJAX 的相关资源链接：
http://www.cnblogs.com/JeffreyZhao/archive/2007/03/12/ASP_NET_AJAX_MSDN_Webcast_Feedback.html
该内容由赵总制作，讲解详细且深入浅出，希望他能推出更多学习 Demo 供社区分享。
AOS.js 动画不触发怎么办？排查 DOM 加载与移动端兼容问题
2026-11-05 17:02:26
sigma.js 怎么实现节点点击、拖拽与悬停提示交互
2026-11-05 15:03:27
Matter.js 与 PixiJS/Three.js 集成：分离物理计算与渲染
2026-11-05 13:43:48
主流JS弹幕库选型指南：Danmaku.js等库的功能与体积对比
2026-11-05 09:28:19
JavaScript点击事件监听与交互效果实例
2026-11-05 09:10:19