本文介绍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就选中哪个元素
}
以上内容涵盖了事件对象的基本传递方式及常见属性的应用,旨在为读者提供清晰的技术参考,欢迎持续关注以获取更多技术支持。