在 JavaScript 中检测箭头键的按下情况
本教程介绍了如何使用某些内置函数来创建快捷方式并设置热键,这些函数在 JavaScript 中侦听用户的输入。本文还将详细介绍 JavaScript 中的事件和事件监听器。
什么是事件
从编码的角度来看,我们进行的物理活动会引起一个事件。这些事件是程序执行的驱动力;它在使用图形用户界面 (GUI) 时很有帮助。
我们可以通过使用事件侦听器
过程来制作这些快捷方式和热键,该过程侦听特定事件并将此信息传递给处理程序以处理事件。
简而言之,输入按下的键(鼠标或键盘),我们也可以直接使用处理这些事件的事件处理程序
。我们将深入演示这两种范式。
JavaScript 中最常见的 EventListeners
是什么
JS 中有很多事件处理函数,这两个是最常见的,它们的作用是:
keydown
:当你按下一个键时注册,如果你按住它会持续注册keyup
:释放键时注册
JavaScript 中的 Keydown 事件监听器
.onkeydown
事件处理程序告诉编译器在按下所需的键后立即运行某个 function()
;通过放置一个 alert("message")
,我们可以显示一个包含指定消息的警报框。
在下面的代码中,我们使用了两个事件属性,.key
,它将返回按下的键的标签,以及 .keyCode
,它返回特定键的代码。这些键码类似于 ASCII,因为每个键都映射到特定的字母数字值。
在我们的示例中,我们输入 k
作为函数参数。
document.onkeydown = function(e) {
alert(e.key+e.keyCode); // shows k75
};
一旦按下特定键,我们就会收到一条警报,显示按下的键与其键代码连接。按键标签和按键代码使操作代码逻辑更容易,广泛用于事件驱动的操作。
让我们看一个例子,展示我们如何利用这些参数来发挥我们的优势。
document.onkeydown = function(e) {
switch (e.keyCode) {
case 37:
alert("left"); //show the message saying left"
break;
case 38:
alert("up"); //show the message saying up"
break;
case 39:
alert("right"); //show the message saying right"
break;
case 40:
alert("down"); //show the message saying down"
break;
}
};
在这里,我们使用一个简单的 switch case,它接收按键代码,检查它属于哪个 case,并评估它以显示一条消息。假设我们按下左箭头键;然后它将显示 left
警报,依此类推。
我们也可以用这种方式定义事件监听器:
document.addEventListener("keydown", function(event) {});
在这里,我们看一下另一种范式,以及它与我们以前的方法有何不同:
document.addEventListener("keydown", function(event) {
if (event.key == "ArrowLeft"){
alert("Left key"); //show the message saying Left key"
} else if (event.key == "ArrowUp"){
alert("Up key"); //show the message saying Up key"
} else if (event.key == "ArrowRight"){
alert("Right key"); //show the message saying Right key"
} else if (event.key == "ArrowDown"){
alert("Down key"); //show the message saying Down key"
}
});
这段代码似乎给出了与我们之前的代码相同的输出。尽管如此,这里还是有一个问题,这里我们没有明确地使用键代码来玩弄我们的逻辑,而是直接使用诸如向下箭头
和向上箭头
之类的键标签并比较它们以显示所需的消息。
假设我们按下了向上箭头,那么我们的 if
代码块将检查从函数返回的键标签是否与给定的键标签匹配。如果是,则执行该块,并显示一条消息。
现在,当我们可以记住更容易记住的助记键标签时,我们不必记住每个键的键码。当我们不知道按键代码并涉足逻辑时,这非常方便。