JavaScript |检测按下的箭头键

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

• onkeydown 事件：
  当有人按下一个键（在键盘上）时，会发生此事件。
  句法：
  • 在 HTML 中：

  • 在 JavaScript 中：

    object.onkeydown = function(){newScript};
    

  • 在 JavaScript 中使用 addEventListener() 方法：

    object.addEventListener("keydown", newScript);
    

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

  document.addEventListener(event, function, captureBoolean)
  

  参数：

  • 事件：此参数是必需的。它以字符串格式指定事件的名称。
  • 函数：此参数是必需的。它指定事件发生时要运行的函数。

    当事件发生时，将一个事件对象作为第一个参数传递给函数。事件对象的类型取决于指定的事件。

  • captureBoolean：此参数是可选的。它指定了一个布尔值，该值告诉事件应该在捕获阶段还是在冒泡阶段执行。默认值为假，事件在冒泡阶段执行，真事件在捕获阶段执行。

示例 1：此示例使用event.keyCode通过onkeydown 事件检测箭头键。

  

    
        JavaScript
      | Detecting arrow key presses.
    

  

      
            GeeksForGeeks  
        
    
        Press an arrow key and click the 
      button to know which key was pressed 
      last time.
    
    
        Detect Arrow key
    
    
    
    
        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;
            }
        };
    

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

示例 2：此示例通过使用event.key将eventListener(keydown)添加到正文来检测箭头键。

  

    
        JavaScript |
      Detecting arrow key presses.
    

  

      
            GeeksForGeeks  
        
    
        Press an arrow key and click the
      button to know which key was pressed
      last time.
    
    
        Detect Arrow key
    
    
    
    
        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;
            }
        });
    

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：