JavaScript 检测按下的箭头键

有时我们需要检测按键，甚至还需要检测哪些按键被按下。要检测哪个箭头键被按下，我们将看两个示例。

onkeydown事件： 当有人按下键盘上的某个键时触发此事件。

语法：

在HTML中：

<element onkeydown="newScript" >

在JavaScript中：

object.onkeydown = function(){newScript};

在JavaScript中使用addEventListener()方法：

object.addEventListener("keydown", newScript);

JavaScript addEventListener()方法 ：此方法将事件处理程序附加到文档。

语法：

document.addEventListener(event, function, captureBoolean)

参数:

event: 这个参数是必需的。它以字符串格式指定事件的名称。
function: 这个参数是必需的。它指定当事件发生时要运行的函数。当事件发生时，会将事件对象作为第一个参数传递给该函数。事件对象的类型取决于指定的事件。
captureBoolean: 这个参数是可选的。它指定一个布尔值，表示事件是应该在捕获阶段还是冒泡阶段执行。默认值为false，表示事件在冒泡阶段执行；为true时，表示事件在捕获阶段执行。

示例1: 这个示例通过 onkeydown事件 使用 event.keyCode 来检测箭头键。

<h1 style="color:green;"> 
    GeeksForGeeks 
</h1> 
<p id="GFG_UP" style="font-size: 16px;"> 
    Press an arrow key and click the 
    button to know which key was pressed 
    last time. 
</p> 
<button onclick="gfg_Run()"> 
    Detect Arrow key 
</button> 
<p id="GFG_DOWN" style="color:green; 
            font-size: 20px; 
            font-weight: bold;"> 
</p> 
<script> 
    var el_up = document.getElementById("GFG_UP"); 
    var el_down = document.getElementById("GFG_DOWN"); 
    var str = 'No key pressed'; 
      
    function gfg_Run() { 
        el_down.innerHTML = str; 
    } 
    document.onkeydown = function(e) { 
        switch (e.keyCode) { 
            case 37: 
                str = 'Left Key pressed!'; 
                break; 
            case 38: 
                str = 'Up Key pressed!'; 
                break; 
            case 39: 
                str = 'Right Key pressed!'; 
                break; 
            case 40: 
                str = 'Down Key pressed!'; 
                break; 
        } 
    }; 
</script>

输出：

JavaScript 检测按下的箭头键

示例2： 通过在body上添加一个 eventListener(keydown) ，使用 event.key 检测箭头键。

<h1 style="color:green;"> 
    GeeksForGeeks 
</h1> 
<p id="GFG_UP" style="font-size: 16px;"> 
    Press an arrow key and click the 
    button to know which key was pressed 
    last time. 
</p> 
<button onclick="gfg_Run()"> 
    Detect Arrow key 
</button> 
<p id="GFG_DOWN" style="color:green; 
            font-size: 20px; 
            font-weight: bold;"> 
</p> 
<script> 
    var el_up = document.getElementById("GFG_UP"); 
    var el_down = document.getElementById("GFG_DOWN"); 
    var str = 'No key pressed'; 
      
    function gfg_Run() { 
        el_down.innerHTML = str; 
    } 
    document.body.addEventListener('keydown', function(event) 
                                { 
        const key = event.key; 
        switch (key) { 
            case "ArrowLeft": 
                str = 'Left'; 
                break; 
            case "ArrowRight": 
                str = 'Right'; 
                break; 
            case "ArrowUp": 
                str = 'Up'; 
                break; 
            case "ArrowDown": 
                str = 'Down'; 
                break; 
        } 
    }); 
</script>

输出：

JavaScript 检测按下的箭头键