本文深入解析 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 供社区分享。