JavaScript事件对象详解:参数传递与属性应用

作者:像素猫

时间:2026-10-21

浏览:416

本文介绍JavaScript中事件处理函数默认传递的事件对象参数。通过定义evt变量兼容不同浏览器,详解clientX、screenX等鼠标位置属性,以及shiftKey、keyCode等键盘事件属性的使用方法,帮助开发者准确获取用户交互信息。

文章目录

事件对象的参数传递机制

当为元素绑定事件处理函数时,浏览器会自动向该函数传递一个参数,即事件对象。


document.onclick = function() {
 alert(arguments.length); //1
}

直接通过arguments[0]访问该参数较为繁琐,因此通常建议显式定义一个参数(如evt)来接收并操作事件对象。

鼠标事件属性与位置获取


document.onmouseup = function(evt) {
 var e = evt || window.event;
 alert(e.button); //0为鼠标左键,1为滚轮,2为右键
 //基于浏览器可视区左上角的位置
 alert(e.clientX + ',' + e.clientY);
 //机器的分辨率
 alert(window.screen.width + ',' + window.screen.height);
 // 离屏幕左上角的位置
 alert(e.screenX + ',' + e.screenY);
}

键盘修饰键与按键检测


//侦测按键
document.onclick = function(evt) {
 alert(getKey(evt));
}
function getKey(evt) {
 var e = evt || window.event;
 var keys = [];
 if (e.shiftKey) {
 keys.push('shift');
 }
 if (e.ctrlKey) {
 keys.push('ctrl');
 }
 if (e.altKey) {
 keys.push('alt');
 }
 return keys;
}

键盘事件类型与目标元素识别


//键盘事件,keydown是按下任意键,keyup是弹起任意键,keypress按下字符键触发
//键码:键盘上任意键,全兼容
//字符编码:可以输出的字符的键,IE不兼容
document.onkeydown=function(evt){
 var e = evt || window.event;
 alert(e.keyCode); //keyCode返回键码
 }
document.onkeypress = function(evt) {
 var e = evt || window.event;
 alert(e.charCode);  //charCode返回字符键码
 }
document.onclick = function(evt) {
 var e = evt || window.event;
 alert(e.target.innerHTML);  //点到哪里target就选中哪个元素
 }

以上内容涵盖了事件对象的基本传递方式及常见属性的应用,旨在为读者提供清晰的技术参考,欢迎持续关注以获取更多技术支持。

实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
相关文章