本文详细解析JavaScript中的event对象及其核心属性。涵盖鼠标坐标(clientX, screenX)、按键状态(shiftKey, ctrlKey)、事件源(srcElement)及控制流(cancelBubble, returnValue)。通过具体代码示例,说明如何获取鼠标位置、拦截默认行为及处理键盘事件,适用于传统DOM事件开发场景。
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()">
另一个示例展示了如何在浏览器状态栏实时显示鼠标的当前坐标位置。
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事件。对于其他事件(如onclick),无论鼠标状态如何,该属性均返回0。
事件冒泡与默认行为控制
3. cancelBubble
功能描述:
用于检测是否阻止事件向父级元素冒泡。
语法格式:
event.cancelBubble[ = cancelBubble]
返回值说明:
这是一个可读写的布尔值:
TRUE 表示阻止事件向父级元素冒泡。
FALSE 允许事件向父级元素冒泡,这是默认值。
示例说明:
以下代码片段演示了当点击图片时,如果同时按下Shift键,则阻止事件冒泡至body元素,从而取消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
功能描述:
用于检测键盘事件对应的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的值。
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
功能描述:
返回触发该事件的DOM元素。此属性为只读。示例见本文开头。
语法格式:
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轴坐标。若未找到此类父元素,则默认以BODY元素为参考对象。
语法格式:
event.x
注意事项:
若事件触发后鼠标移出窗口范围,则返回值为-1。
此为只读属性,仅用于获取鼠标位置,无法通过此属性修改鼠标位置。
21. y
功能描述:
返回鼠标相对于CSS中设置了position属性的父元素的Y轴坐标。若未找到此类父元素,则默认以BODY元素为参考对象。
语法格式:
event.y
注意事项:
若事件触发后鼠标移出窗口范围,则返回值为-1。
此为只读属性,仅用于获取鼠标位置,无法通过此属性修改鼠标位置。