网硕互联帮助中心一、先理解什么叫「键盘事件」
我们平时按键：
例如：
按下 A
↓
电脑检测到键盘动作
↓
浏览器发现有人按键
↓
触发一个键盘事件
↓
JavaScript 接收到这个事件
↓
执行我们的代码
比如：
你按了一下键盘：
A
浏览器会告诉 JavaScript：
"有人按了一个键，这个键的信息给你。"
这个信息就是：
event
也叫：
事件对象
二、最简单的键盘按下
看代码：
<!DOCTYPE html>
<html>
<body>
<script>
document.addEventListener("keydown",function(){
console.log("键盘按下了");
});
</script>
</body>
</html>
运行结果
打开浏览器：
按：
A
控制台：
键盘按下了
再按：
B
控制台：
键盘按下了
键盘按下了
为什么？
因为：
每按一次：
keydown事件触发一次
三、keydown到底是什么？
拆开：
document.addEventListener()
意思：
给网页添加一个事件监听。
比如：
document.addEventListener("click",function(){
})
监听鼠标点击。
而：
document.addEventListener("keydown",function(){
})
监听键盘按下。
这里：
"keydown"
就是事件名字。
意思：
当键盘按下的时候执行后面的函数。
四、但是现在有一个问题
上面的代码只能知道：
有人按键了
但是不知道：
你按的是A？
还是B？
还是Enter？
怎么办？
需要：
事件对象 event
修改代码：
document.addEventListener("keydown",function(event){
console.log(event);
});
注意：
这里多了：
event
意思：
浏览器发生键盘事件时：
自动把键盘信息放进 event。
例如：
你按 A：
浏览器产生：
event
{
key:"a",
code:"KeyA"
}
然后交给 JavaScript。
五、按A时控制台输出什么？
代码：
document.addEventListener("keydown",function(event){
console.log(event.key);
});
现在按：
A
控制台：
a
按：
B
输出：
b
按：
Enter
输出：
Enter
按：
空格
输出：
（一个空格）
为什么？
因为：
event.key
表示：
你按下的键是什么
六、event.key详细理解
比如：
你按：
键盘上的：
1
浏览器给：
event.key
值：
1
你按：
@
输出：
@
你按：
Shift
输出：
Shift
你按：
Enter
输出：
Enter
七、event.code是什么？
再看：
代码：
document.addEventListener("keydown",function(event){
console.log(event.code);
});
按：
A
控制台：
KeyA
按：
B
输出：
KeyB
按：
1
输出：
Digit1
按：
空格
输出：
Space
key 和 code区别
假设：
键盘：
A键
但是你切换成大写：
按：
Shift+A
那么：
event.key
输出：
A
但是：
event.code
仍然：
KeyA
原因：
key：
看你输入什么。
code：
看你按哪个物理键。
八、keydown执行顺序
例如：
代码：
document.addEventListener("keydown",function(event){
console.log("开始");
console.log(event.key);
});
按：
A
浏览器执行：
第一步：
触发keydown
第二步：
进入函数：
function(event)
第三步：
执行：
console.log("开始")
输出：
开始
第四步：
执行：
console.log(event.key)
输出：
a
所以控制台：
开始
a
九、keyup是什么？
keydown：
按下。
keyup：
松开。
代码：
document.addEventListener("keyup",function(event){
console.log(event.key);
});
现在：
按住 A：
什么都没有
松开：
控制台：
a
过程：
手指：
按下A
|
|
keydown触发
|
|
松开A
|
|
keyup触发
十、keydown和keyup一起看
代码：
document.addEventListener("keydown",function(){
console.log("按下");
});
document.addEventListener("keyup",function(){
console.log("松开");
});
操作：
按一下：
A
控制台：
按下
松开
因为：
按下：
keydown
松开：
keyup
十一、实际控制案例
比如：
按 Enter 显示：
"提交"
代码：
document.addEventListener(
"keydown",
function(event){
if(event.key==="Enter")
{
console.log("提交");
}
});
你按：
A
控制台：
(没有输出)
你按：
Enter
控制台：
提交
为什么？
因为：
event.key：
A键：
"a"
判断：
"a"==="Enter"
假
Enter：
"Enter"
判断：
"Enter"==="Enter"
真
执行：
console.log()
十二、监听方向键
代码：
document.addEventListener(
"keydown",
function(event){
console.log(event.key);
});
按：
键盘 ↑
输出：
ArrowUp
按：
↓
输出：
ArrowDown
按：
←
输出：
ArrowLeft
按：
→
输出：
ArrowRight
十三、最重要总结
你现在只需要记住这个模型：
用户按键
|
↓
keydown事件发生
|
↓
浏览器创建event对象
|
↓
传给function(event)
|
↓
通过event.key知道按了什么
代码模板：
document.addEventListener(
"keydown",
function(event){
console.log(event.key);
});
效果：
| A | a |
| B | b |
| 1 | 1 |
| Enter | Enter |
| 空格 | 空格 |
| ↑ | ArrowUp |
| ↓ | ArrowDown |
评论前必须登录！
注册