JavaScript HTML DOM 事件之键盘事件

myzbx 2025-01-10 15:40 48 浏览

每天都看看美女。

今天我们来了解下 JavaScript HTML DOM 键盘事件，下面这几个比较常用，我们分别来介绍下。

事件	描述	属于
on keydown	当用户正在按下键时，发生此事件。	KeyboardEvent
on keypress	当用户按下键时，发生此事件。	KeyboardEvent
on keyup	当用户松开键时，发生此事件。	KeyboardEvent

onkeydown键盘事件

当用户正在按下键时，发生此事件

我们测试下当按下键盘的某一个键时，打印出你按下了哪个键的提示。F12测试走起。

document.onkeydown = function (e) {console.log('你按下了'+e.key+'键');}

编辑搜图

可以看到我们按下键盘上的键时右边就打印出了相应键的名称，最下面的control和shift是我截图的快捷键。比如我们玩游戏时的wsad四个键控制前后左右，就是通过键盘事件来实现的。

onkeypress键盘事件

当用户按下键时，发生此事件。

就按上面的功能我们演示一下onkeydown和onkeypress两个功能的区别，当用onkeydown时如果我们使用backspace, F1-F12,delete,箭头等键时会打印提示，我们再看看onkeypress键盘事件使用backspace, F1-F12,delete,箭头等的区别，我们刷新下页面。

document.onkeypress = function (e) {console.log('你按了'+ e.key +'键');}

编辑搜图

我们可以看到但我使用英文输入法时，会打印相应键盘的提示，但是我打中文时就不打印提示了，而且使用backspace, F1-F12,delete,箭头等键时也不打印提示。

onkeyup键盘事件

当用户松开键时，发生此事件。

这个好理解，当我们松开按键时发生事件，我们可以用这个功能来统计按键次数，前面的onkeydown和onkeypress但我们一直持续按住键时会一直触发事件，会导致一直在打印提示，如果用这两个统计按键次数的话就不准确，可以使用onkeyup来统计，你松开键时肯定是触发了按下的。我们来实现一下这个功能。

var i=0;
document.onkeyup = function () { 
i++;
console.log('你已按了'+ i +'次键盘了');
}

编辑搜图

可以看到我们右边打印出来了我们按下键盘的次数，随着我们不断的敲击键盘，右边的按键次数也在不断增加。还有一个就是，onkeyup和onkeydown一样都能统计到 backspace, F1-F12,delete,箭头等键的触发事件。

好了，今天就分享到这里。我们下次了解下JavaScript HTML DOM 页面相关事件。

HTML 事件

上一篇：应该了解的 9 个 JavaScript 事件
下一篇：JavaScript HTML DOM 事件

JavaScript HTML DOM 事件之键盘事件

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿