- 搜索
日期：2025/04/02 13:00来源：未知 人气：53
每天都看看美女。
今天我们来了解下 JavaScript HTML DOM 键盘事件，下面这几个比较常用，我们分别来介绍下。
当用户正在按下键时，发生此事件
我们测试下当按下键盘的某一个键时，打印出你按下了哪个键的提示。F12测试走起。
document.onkeydown = function (e) {console.log('你按下了'+e.key+'键');}
可以看到我们按下键盘上的键时右边就打印出了相应键的名称，最下面的control和shift是我截图的快捷键。比如我们玩游戏时的wsad四个键控制前后左右，就是通过键盘事件来实现的。
当用户按下键时，发生此事件。
就按上面的功能我们演示一下onkeydown和onkeypress两个功能的区别，当用onkeydown时如果我们使用backspace, F1-F12,delete,箭头等键时会打印提示，我们再看看onkeypress键盘事件使用backspace, F1-F12,delete,箭头等的区别，我们刷新下页面。
document.onkeypress = function (e) {console.log('你按了'+ e.key +'键');}
我们可以看到但我使用英文输入法时，会打印相应键盘的提示，但是我打中文时就不打印提示了，而且使用backspace, F1-F12,delete,箭头等键时也不打印提示。
当用户松开键时，发生此事件。
这个好理解，当我们松开按键时发生事件，我们可以用这个功能来统计按键次数，前面的onkeydown和onkeypress但我们一直持续按住键时会一直触发事件，会导致一直在打印提示，如果用这两个统计按键次数的话就不准确，可以使用onkeyup来统计，你松开键时肯定是触发了按下的。我们来实现一下这个功能。
var i=0;document.onkeyup = function () { i++;console.log('你已按了'+ i +'次键盘了');}
可以看到我们右边打印出来了我们按下键盘的次数，随着我们不断的敲击键盘，右边的按键次数也在不断增加。还有一个就是，onkeyup和onkeydown一样都能统计到 backspace, F1-F12,delete,箭头等键的触发事件。
好了，今天就分享到这里。我们下次了解下JavaScript HTML DOM 页面相关事件。
