JavaScript中的键盘事件_js键盘按下只能是window监听?-优快云博客

本文链接：https://blog.youkuaiyun.com/MixedSignals/article/details/105232771

本文深入解析了键盘事件的绑定与触发机制，重点介绍了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键');
}
}