一、先理解什么叫「键盘事件」我们平时按键例如按下 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按空格输出Spacekey 和 code区别假设键盘A键但是你切换成大写按ShiftA那么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.keyEnter) { console.log(提交); } });你按A控制台(没有输出)你按Enter控制台提交为什么因为event.keyA键a判断aEnter假EnterEnter判断EnterEnter真执行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); });效果你按控制台AaBb11EnterEnter空格空格↑ArrowUp↓ArrowDown