在 JavaScript 中檢測鍵盤輸入事件

在 JavaScript 中檢測鍵盤輸入事件

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

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

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

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

語法

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

引數

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

你可以收聽 keydownkeypresskeyup 三種型別的鍵盤事件。瀏覽器會觸發 keydown 事件,當鍵盤上的某個鍵被按下時,當它被釋放時,會觸發 keyup 事件。每個鍵盤事件都有自己的 keyCodekey。例如,回車按鈕有鍵 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();
}

輸出:

檢測鍵盤輸入事件 JS

Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn

相關文章 - JavaScript Event

  • 在 Onclick 事件中呼叫多個 JavaScript 函式
  • 在 JavaScript 中的 HTML 影象標籤上新增 Onclick 事件
  • 使用 JavaScript 模擬點選
  • JavaScript 中的事件目標
  • 用 JavaScript 在 iframe 中實現一個 onload 事件