JavaScript HTML DOM 事件之键盘事件

zhezhongyun 2024-12-19 17:53 71 浏览

每天都看看美女。

今天我们来了解下 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 DOM 教程

上一篇：HTML DOM Select 对象 html中的selected属性
下一篇：JavaScript HTML DOM 事件 js dom操作

JavaScript HTML DOM 事件之键盘事件

相关推荐

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

HTML 简介（html简介及优缺点）

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）

在SpringBoot+Vue3项目中通过Nginx代理WebSocket实现跨域通信

利用webSocket实现消息的实时推送

谈谈websocket跨域

前端开发规范(一、HTML篇)

html5 工业web组态-开发自定义的组件 (炫酷按钮)

Python每日一库之Beautiful Soup（python mtime）