在 JavaScript 中檢測鍵盤輸入事件

事件偵聽器只是一個 JavaScript 函式，它在發生特定使用者輸入事件時觸發。此類事件的一個簡單示例是滑鼠單擊或鍵盤按鈕按下。必須首先向目標註冊事件偵聽器函式。之後，每當我們感興趣的特定事件發生時，我們的監聽器函式就會被觸發。可以將多個偵聽器附加到可以偵聽相同或不同事件型別的同一目標。

今天的帖子向你展示瞭如何在 JavaScript 中識別鍵盤輸入事件。

在 JavaScript 中使用 addEventListener() 檢測鍵盤輸入事件

這是 JavaScript 提供的內建方法，用於註冊事件偵聽器。它是 EventTarget 介面的一個方法。每當在目標上檢測到指定的事件時，就會呼叫我們配置的函式。

語法

target.addEventListener($type, $listener);
target.addEventListener($type, $listener, $options);
target.addEventListener($type, $listener, $useCapture);

引數

• $type：它是一個強制引數，只接受指定要監聽的事件型別的字串。它區分大小寫，並支援各種事件，如 mouse、keyboard、input、database 等。
• $listener：它是一個強制引數，一個物件，當指定型別的事件發生時將收到通知。此物件必須實現 EventListener 介面或 JavaScript 函式。
• $options：它是一個可選引數，指定事件偵聽器的特性。一些特徵是捕獲、一次、被動和訊號。
• $useCapture：它是一個可選引數，它接受布林值，指示該型別的事件在傳送到 DOM 樹中下面的 EventTarget 之前是否先傳送到註冊的偵聽器。

你可以收聽 keydown、keypress 和 keyup 三種型別的鍵盤事件。瀏覽器會觸發 keydown 事件，當鍵盤上的某個鍵被按下時，當它被釋放時，會觸發 keyup 事件。每個鍵盤事件都有自己的 keyCode 或 key。例如，回車按鈕有鍵 Enter 和 keyCode 13。

示例程式碼：

<input type="text" id="textId">

document.getElementById('textId').addEventListener('keydown', myFunction);

function myFunction() {
  switch (event.key) {
    case 'ArrowDown':
      console.log('ArrowDown');
      break;
    case 'ArrowUp':
      console.log('ArrowUp');
      break;
    case 'ArrowLeft':
      console.log('ArrowLeft');
      break;
    case 'ArrowRight':
      console.log('ArrowRight');
      break;
    default:
      console.log(event.key, event.keyCode);
      return;
  }

  event.preventDefault();
}

輸出：