KeyDown, KeyPress, KeyUp: Was ist der Unterschied und wann sollten Sie beide verwenden?

Verstehen von onKeyPress vs. onKeyUp vs. onKeyDown

Bei der Suche nach den Unterschieden zwischen diesen drei Ereignissen stoßen Sie möglicherweise auf einen weit verbreiteten Irrglauben, dass onKeyPress gleichzeitig mit onKeyUp auftritt. Lassen Sie uns diese Verwirrung klären und Licht auf die einzigartigen Eigenschaften jedes Ereignisses werfen.

Eine Ereigniszeitleiste

In der Reihenfolge der wichtigsten Eingabeereignisse haben wir die folgende Aufschlüsselung:

1. onKeyDown: Wird ausgelöst, wenn der Benutzer zum ersten Mal a drückt key.
2. onKeyPress: Veraltet und empfohlen, stattdessen onKeyDown zu verwenden. Dieses Ereignis trat auf, wenn der Benutzer eine Taste sowohl drückte als auch losließ, was effektiv eine Kombination aus onKeyDown und ist onKeyUp.
3. onKeyUp: Wird ausgelöst, wenn der Benutzer die zuvor gedrückte Taste loslässt Taste.

Analogie mit Mausereignissen

Um die Beziehungen zwischen diesen Schlüsselereignissen zu verstehen, ziehen wir eine Analogie zu ihren Maus-Gegenstücken:

• onKeyDown: Äquivalent zu MouseDown
• onKeyPress: Äquivalent zu Click (Jetzt veraltet und ersetzt durch onKeyDown)
• onKeyUp: Äquivalent zu MouseUp

Browser-Ausnahme: WebKit

In der Welt der Webbrowser zeichnet sich WebKit durch die Einführung eines zusätzlichen Ereignisses aus: textInput. Die Ereignissequenz für WebKit lautet somit:

keydown
keypress
textInput     
keyup

Praktische Demonstration

Um diese Ereignisse in Aktion zu erleben, führen Sie den folgenden Codeausschnitt aus:

window.addEventListener("keyup", log);
window.addEventListener("keypress", log);
window.addEventListener("keydown", log);

function log(event){
  console.log( event.type );
}

Dieses Skript protokolliert Geben Sie den Ereignistyp an die Konsole weiter, während Sie mit der Tastatur interagieren. Sie werden die eindeutige Abfolge der Ereignisse bemerken, wenn Sie Tasten drücken und wieder loslassen.

Das obige ist der detaillierte Inhalt vonKeyDown, KeyPress, KeyUp: Was ist der Unterschied und wann sollten Sie beide verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!