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

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

相关文章
|
6月前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
6月前
|
JavaScript 前端开发
JavaScript 中如何检测一个变量是一个 String 类型?
JavaScript 中如何检测一个变量是一个 String 类型?
62 2
|
2月前
|
存储 JavaScript 对象存储
js检测数据类型有那些方法
js检测数据类型有那些方法
140 59
|
2月前
|
编解码 前端开发 JavaScript
javascript检测网页缩放演示代码
javascript检测网页缩放演示代码
|
18天前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
127 9
|
18天前
|
监控 JavaScript 前端开发
如何检测和解决 JavaScript 中内存泄漏问题
【10月更文挑战第25天】解决内存泄漏问题需要对代码有深入的理解和细致的排查。同时,不断优化和改进代码的结构和逻辑也是预防内存泄漏的重要措施。
34 6
|
5月前
|
算法 JavaScript 前端开发
在JavaScript中实现基本的碰撞检测算法,我们通常会用到矩形碰撞检测,也就是AABB(Axis-Aligned Bounding Box)碰撞检测
【6月更文挑战第16天】JavaScript中的基本碰撞检测涉及AABB(轴对齐边界框)方法,常用于2D游戏。`Rectangle`类定义了矩形的属性,并包含一个`collidesWith`方法,通过比较边界来检测碰撞。若两矩形无重叠部分,四个条件(关于边界相对位置)均需满足。此基础算法适用于简单场景,复杂情况可能需采用更高级的检测技术或物理引擎库。
95 6
|
30天前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
70 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
3月前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
107 1
|
3月前
|
前端开发 JavaScript
Web 前端大揭秘!JS 数据类型检测竟如此震撼,一场惊心动魄的代码探秘之旅等你来!
【8月更文挑战第23天】在Web前端开发中,合理检测数据类型至关重要。JavaScript作为动态类型语言,变量类型可在运行时变化,因此掌握检测技巧十分必要。
34 1