Tastatureingabeereignis in JavaScript erkennen

Ein Ereignis-Listener ist einfach eine JavaScript-Funktion, die ausgelöst wird, wenn ein bestimmtes Benutzereingabeereignis eintritt. Ein einfaches Beispiel für ein solches Ereignis ist ein Mausklick oder ein Tastendruck auf der Tastatur. Event-Listener-Funktionen müssen zuerst bei einem Ziel registriert werden. Danach wird unsere Listener-Funktion immer dann ausgelöst, wenn ein bestimmtes Ereignis eintritt, an dem wir interessiert sind. Mehrere Listener können an dasselbe Ziel angehängt werden, das denselben oder unterschiedliche Ereignistypen überwachen kann.

Der heutige Beitrag zeigt Ihnen, wie Sie Tastatureingabeereignisse in JavaScript erkennen.

Tastatureingabeereignis mit addEventListener() in JavaScript erkennen

Dies ist eine von JavaScript bereitgestellte integrierte Methode, die einen Ereignis-Listener registriert. Es ist eine Methode der Schnittstelle EventTarget. Immer wenn das angegebene Ereignis auf dem Ziel erkannt wird, wird unsere konfigurierte Funktion aufgerufen.

Syntax

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

Parameter

• $type: Es ist ein obligatorischer Parameter, der nur einen String akzeptiert, der den Typ des abzuhörenden Ereignisses angibt. Es beachtet die Groß-/Kleinschreibung und unterstützt verschiedene Ereignisse wie mouse, keyboard, input, database usw.
• $listener: Dies ist ein obligatorischer Parameter, ein Objekt, das eine Benachrichtigung erhält, wenn ein Ereignis des angegebenen Typs eintritt. Dieses Objekt muss die EventListener-Schnittstelle oder eine JavaScript-Funktion implementieren.
• $options: Dies ist ein optionaler Parameter, der die Eigenschaften des Ereignis-Listeners angibt. Einige der Merkmale sind capture, once, passive und signal.
• $useCapture: Dies ist ein optionaler Parameter, der boolesche Werte akzeptiert, die angeben, ob Ereignisse dieses Typs an den registrierten Listener gesendet werden, bevor sie an ein EventTarget unten im DOM-Baum gesendet werden.

Es gibt drei Arten von Tastaturereignissen, die Sie sich anhören können: keydown, keypress und keyup. Der Browser löst ein keydown-Ereignis aus, wenn eine Taste auf der Tastatur gedrückt wird, und wenn sie losgelassen wird, wird ein keyup-Ereignis ausgelöst. Jedes Keyboard-Ereignis hat seinen eigenen keyCode oder key. Zum Beispiel hat die Enter-Taste die Taste Enter und den KeyCode 13.

Beispielcode:

<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();
}

Ausgabe: