JavaScript绑定键盘事件的多种写法

使用JavaScript来绑定键盘事件时，有多种写法，而他们的实现效果实际上是等价的，下面一一来列举。

方式一：

function keyboard() {document.onkeydown = function() {let keycode = event.keyCode;if (keycode == 32) {alert("空格键被按下了");}}
}
keyboard();

随后我们执行这个函数，就可以实现键盘事件绑定。

代码中的event是一个对象，如果你打印event的话，会返回[object KeyboardEvent]。

在事件发生时，浏览器会创建一个event对象，所有相关信息会收集并存储在该对象中。这些对象包含一些基本信息，比如导致事件的元素、发生的事件类型，以及可能与特定事件相关的任何其他数据。

在DOM合规的浏览器中，event对象是传给事件处理程序的唯一参数。不管以哪种方式指定事件处理程序，都会传入这个event对象。

event对象的keyCode属性会保存一个键码，对应键盘上特定一个键。方式一种的32，对应就是键盘中的空格键。

document.onkeydown来对用户敲击键盘事件进行监听，它需要绑定一个具体执行函数。比如方式一中的function函数，当键盘被按下时进行具体执行。但是代码这样写，理解起来不太直观，我们使用方式二来实现一下同样的功能。

方式二：

function keyboard(event) {let keycode = event.keyCode;if (keycode == 32) {alert("空格键被按下了")}
}//参数1：表示事件，keydown:键盘向下按；参数2：表示触发的事件处理函数
document.addEventListener("keydown", keyboard);

方式二实现的功能和方式一完全一样，但写成事件监听的方式理解起来要更为容易。

参考资料

[1] 《JavaScript高级程序设计（第四版）》
[2] 浏览器事件简介
[3] onkeydown 事件

JavaScript绑定键盘事件的多种写法相关推荐

详解在vue项目当中绑定键盘事件
在vue项目当中,有时会遇到为文本输入框或者button按钮绑定键盘事件,最常见的就是enter回车事件. 按照vue官网给出的方法是: v-on:keyup.enter 简写: @keyup.ent ...
正确绑定键盘事件_事件为何重要以及如何正确处理
正确绑定键盘事件玛丽娜·佩奇 ( Marina Paych )在她的生日那天离开了一个非政府组织,开始了IT行业的新起点时,她是开源软件的新来者. 但是真正的惊喜竟然是开源. 快进两年了,这个组织发 ...
vue绑定键盘事件 ctrl+enter触发事件
公司项目(vue+element)有个需求,是在一个input输入内容后按下Enter键进行搜索查询,查询到得数据显示在表格,勾选表格的选中的数据进行提交(提交按钮的快捷键是Ctrl+Enter键盘) ...
Javascript鼠标键盘事件
鼠标事件 click:单击 dblclick:双击 mousedown:鼠标按下 mouseup:鼠标抬起 mouseover:鼠标悬浮 mouseout:鼠标离开 mousemove:鼠标移动 mo ...
JavaScript 获取键盘事件(键盘某个按键被按下)
键盘事件(Keyboard Events) 属性值描述 onkeydown script 当按下按键时运行脚本 onkeypress script 当按下并松开按键时运行脚本 onkeyup sc ...
javascript之键盘事件onkeydown,onkeyup,onkeypress
键盘事件键盘事件一般绑定给document,以及一些可以获取焦点的标签,如input标签. onkeydown事件: 当键盘任意键按下时执行,按下不松,会不断执行. onkeyup事件: 当键盘任意 ...
JavaScript的键盘事件
键盘事件 keypress 当键盘键按下的过程首先,按键被按下,然后, 按键被松开 keydown 当键盘键按下时,触发 Keyup 当键盘键松开时,触发触发顺序 1.keypress键按下的过程 ...
vue绑定键盘事件无效问题，vue绑定键盘delete事件示例，组合键绑定
项目有个需求,点击某个组件,按delete健后删除,于是乎第一就是想到了键盘事件 @keyup.delete='deleteKeyup(e)' 可是按delete键试了半天都没反应,加了.native ...

JavaScript绑定键盘事件的多种写法

方式一：

方式二：

参考资料

JavaScript绑定键盘事件的多种写法相关推荐

最新文章

热门文章