JavaScript中的键盘事件

本文深入解析了键盘事件的绑定与触发机制,重点介绍了keydown事件的特性,包括如何在window或document上绑定事件,以及如何在可获取焦点的标签如input、select、textarea、button等上进行绑定。探讨了e.key与e.keyCode属性的使用,以及如何通过这些属性判断用户是否同时按下了多个按键。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

键盘事件就是与按键相关的事件,不能绑定给某个标签,必须是window或者document,两个使用效果完全一致。或者是,可以被选中的,可以获取焦点的标签,比如input、select、textarea、button …

keydown:按键按下事件,如果按住不放就会一直触发

window.onkeydown = function(){
console.log(123);
}
或者
document.onkeydown = function(){
console.log(456);
}
var oDiv = document.querySelector('div'); //div标签不支持
oDiv.onkeydown = function(){
console.log(无法输出);
}

var oIpt = document.querySelector('input'); //input标签支持
oIpt.onkeydown = function(){
console.log(可以输出);
}

e.key:存储按下的按键的名称,键盘区域的数字和小键盘区域的数字不做区分,都是相同的

e.keyCode:每个按键对应一个数值,绝对不会重复。使用这个属性来区分每个按键,需要做兼容处理, var 变量 = e.keyCode || e.which

事件对象e中有3个属性
ctrlKey 按下 ctrl 结果是 true 没有按结果是false
altKey 按下 alt 结果是 true 没有按结果是false
shiftKey 按下 shift 结果是 true 没有按结果是false

// 判断按下按键是 ctrl + e (69)
window.onkeydown = function(e){
if(e.ctrlKey == true && e.keyCode == 69){   
console.log('同时按下ctrl和e键');
}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值