Erkennen von Pfeiltastendrücken in JavaScript

1. Was sind Ereignisse
2. Was sind die häufigsten EventListener in JavaScript
3. Keydown-Ereignis-Listener in JavaScript

Dieses Tutorial erklärt, wie Sie Verknüpfungen erstellen und Hotkeys einrichten können, indem Sie bestimmte integrierte Funktionen verwenden, die auf die Eingaben des Benutzers in JavaScript hören. Dieser Artikel enthält auch eine detaillierte Beschreibung von Events und EventListeners in JavaScript.

Was sind Ereignisse

In dieser Codierungsperspektive verursacht die körperliche Aktivität, die wir ausführen, ein Ereignis. Diese Ereignisse sind die treibende Kraft der Programmausführung; Es ist hilfreich, wenn Sie mit der grafischen Benutzeroberfläche (GUI) arbeiten.

Wir können diese Abkürzungen und Hotkeys erstellen, indem wir eine Ereignis-Listener-Prozedur verwenden, die auf ein bestimmtes Ereignis wartet und diese Informationen an den Handler weiterleitet, um das Ereignis zu behandeln.

In einfachen Worten, nimmt eine Eingabe die Taste (Maus oder Tastatur) gedrückt, können wir auch direkt einen event handler verwenden, der diese Ereignisse verarbeitet. Wir werden beide Paradigmen ausführlich demonstrieren.

Was sind die häufigsten EventListener in JavaScript

Es gibt viele Event-Handler in JS, diese beiden sind die häufigsten, und ihre Funktionen sind:

• keydown: registriert, wenn Sie eine Taste drücken, und registriert fortlaufend, wenn Sie sie gedrückt halten
• keyup: registriert, wenn Sie die Taste loslassen

Keydown-Ereignis-Listener in JavaScript

Der Eventhandler .onkeydown weist den Compiler an, eine bestimmte function() auszuführen, sobald die gewünschte Taste gedrückt wird; Durch Platzieren einer alert("message") können wir eine Warnbox mit einer bestimmten Nachricht anzeigen.

Im folgenden Code verwenden wir zwei Ereigniseigenschaften, .key, die die Bezeichnung der gedrückten Taste zurückgeben, und .keyCode, die den Code der jeweiligen Taste zurückgibt. Diese Tastencodes sind wie ASCII, da jede Taste einem bestimmten alphanumerischen Wert zugeordnet ist.

In unserem Beispiel geben wir als Funktionsparameter k ein.

document.onkeydown = function(e) {
  alert(e.key + e.keyCode);  // shows k75
};

Sobald eine bestimmte Taste gedrückt wird, erhalten wir eine Warnung, die die gedrückte Taste mit ihrem Tastencode verkettet anzeigt. Tastenbeschriftungen und Tastencodes erleichtern die Manipulation der Codelogik und werden häufig in ereignisgesteuerten Operationen verwendet.

Schauen wir uns ein Beispiel an, das zeigt, wie wir diese Parameter zu unserem Vorteil nutzen können.

document.onkeydown = function(e) {
  switch (e.keyCode) {
    case 37:
      alert('left');  // show the message saying left"
      break;
    case 38:
      alert('up');  // show the message saying up"
      break;
    case 39:
      alert('right');  // show the message saying right"
      break;
    case 40:
      alert('down');  // show the message saying down"
      break;
  }
};

Hier verwenden wir einen einfachen Schalterfall, der den gedrückten Tastencode aufnimmt, prüft, zu welchem ​​Fall er gehört, und ihn auswertet, um eine Nachricht anzuzeigen. Nehmen wir an, wir drücken die linke Pfeiltaste; dann wird der Alarm links angezeigt und so weiter.

Wir können den Ereignis-Listener auch auf diese Weise definieren:

document.addEventListener('keydown', function(event) {});

Hier werfen wir einen Blick auf ein anderes Paradigma und wie es sich von unserem vorherigen Ansatz unterscheidet:

document.addEventListener('keydown', function(event) {
  if (event.key == 'ArrowLeft') {
    alert('Left key');  // show the message saying Left key"
  } else if (event.key == 'ArrowUp') {
    alert('Up key');  // show the message saying Up key"
  } else if (event.key == 'ArrowRight') {
    alert('Right key');  // show the message saying Right key"
  } else if (event.key == 'ArrowDown') {
    alert('Down key');  // show the message saying Down key"
  }
});

Dieser Code scheint die gleiche Ausgabe wie unser vorheriger Code zu liefern. Allerdings gibt es einen Haken, hier verwenden wir nicht explizit Tastencodes, um mit unserer Logik herumzuspielen, sondern verwenden direkt Tastenbeschriftungen wie Pfeil nach unten und Pfeil nach oben und vergleichen sie, um die gewünschte Nachricht anzuzeigen.

Nehmen wir an, wir haben den Aufwärtspfeil gedrückt, dann prüfen unsere if-Codeblöcke, ob die von der Funktion zurückgegebene Tastenbeschriftung mit den angegebenen Tastenbeschriftungen übereinstimmt. Wenn dies der Fall ist, wird dieser Block ausgeführt und eine Nachricht angezeigt.

Jetzt müssen wir uns nicht mehr die Tastencodes für jede Taste merken, wenn wir uns an die mnemonischen Tastenbeschriftungen erinnern können, die viel einfacher zu merken sind. Dies ist äußerst praktisch, wenn wir die Tastencodes nicht kennen und uns mit Logik beschäftigen.