JavaScript事件对象(event)属性详解与用法指南

作者:页面旅途

时间:2026-10-30

浏览:564

本文详细解析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。


此为只读属性,仅用于获取鼠标位置,无法通过此属性修改鼠标位置。


实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章