在 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 代码块将检查从函数返回的键标签是否与给定的键标签匹配。如果是,则执行该块,并显示一条消息。

现在,当我们可以记住更容易记住的助记键标签时,我们不必记住每个键的键码。当我们不知道按键代码并涉足逻辑时,这非常方便。

相关文章
|
22天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
22天前
|
JavaScript 前端开发
JavaScript 中如何检测一个变量是一个 String 类型?
JavaScript 中如何检测一个变量是一个 String 类型?
25 2
|
22天前
|
JavaScript
(isCrash方法)【拿来即用】原生JS碰撞检测核心代码
(isCrash方法)【拿来即用】原生JS碰撞检测核心代码
|
9月前
|
JavaScript
JS检测客户端是否安装
JS检测客户端是否安装
|
11月前
|
前端开发 JavaScript API
使用 JavaScript 检测系统主题色
使用 JavaScript 检测系统主题色
250 0
|
22天前
|
JavaScript 前端开发 算法
在JavaScript中实现的基本AABB矩形碰撞检测用于2D游戏
【5月更文挑战第14天】在JavaScript中实现的基本AABB矩形碰撞检测用于2D游戏,涉及Rectangle类,包含x,y,width和height属性,以及一个检测碰撞的collidesWith方法。该方法通过比较矩形边界来判断是否相交,返回布尔结果。示例代码展示了如何检测两个Rectangle实例是否发生碰撞。更复杂的场景可能需使用高级算法或物理引擎库。
20 3
|
22天前
|
JavaScript 前端开发
【Web 前端】JS中检测数据类型的有哪些?
【4月更文挑战第22天】【Web 前端】JS中检测数据类型的有哪些?
|
22天前
|
JavaScript 前端开发
JavaScript DOM 操作:如何检测浏览器是否支持某个特性?
【4月更文挑战第15天】使用Modernizr库检测浏览器特性:添加 `<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>` 到HTML,然后通过 `Modernizr.localstorage` 进行检测,如支持localStorage则执行相应代码,否则执行备用逻辑。
20 0
|
22天前
|
算法 JavaScript 前端开发
游戏物理系统 - 如何在JavaScript中实现基本的碰撞检测算法?
在JavaScript中实现2D矩形碰撞检测,常用AABB方法,适合简单游戏。创建Rectangle类,包含位置和尺寸属性,并定义`collidesWith`方法检查两矩形是否相交。通过比较边界位置判断碰撞,当四条边界条件均满足时,认定发生碰撞。基础算法适用于初级需求,复杂场景可采用更高级的碰撞检测库。
19 1
|
22天前
|
JavaScript 前端开发 开发者
JavaScript——周技能检测——菜单编辑——2022年11月22日(考完)
JavaScript——周技能检测——菜单编辑——2022年11月22日(考完)
29 0