Heim >Web-Frontend >js-Tutorial >Was ist der Unterschied zwischen KeyDown, KeyUp und den veralteten KeyPress-Ereignissen?

Was ist der Unterschied zwischen KeyDown, KeyUp und den veralteten KeyPress-Ereignissen?

DDD
DDDOriginal
2024-12-04 21:08:11563Durchsuche

What's the Difference Between KeyDown, KeyUp, and the Deprecated KeyPress Events?

KeyPress-, KeyUp- und KeyDown-Ereignisse verstehen

Um zwischen Tastendruck-, Keyup- und Keydown-Ereignissen zu unterscheiden, betrachten Sie sie analog zu Mausereignissen: Klicken, MouseUp und MouseDown. Das onKeyDown-Ereignis wird ausgelöst, wenn Sie eine beliebige Taste drücken, ähnlich wie bei Mousedown.

OnKeyUp wird ausgelöst, wenn Sie eine Taste loslassen, wie bei Mouseup. Es ist wichtig zu verstehen, dass Sie eine Taste loslassen können (onKeyUp), ohne sie zuerst zu drücken (onKeyDown). Dies tritt häufig auf, wenn Tasten gedrückt gehalten und schließlich losgelassen werden, wodurch beide Ereignisse ausgelöst werden.

OnKeyPress ist jedoch inzwischen veraltet und sollte durch onKeyDown ersetzt werden. Früher kombinierte es die Ereignisse onKeyDown und onKeyUp und verhielt sich ähnlich wie onKeyPress, diese Verwendung wird jedoch nicht mehr empfohlen.

Ausnahme für Webkit-Browser

WebKit-basierte Browser führen eine zusätzliche Funktion ein Ereignis: TextInput. Dieses Ereignis tritt zwischen Tastendruck und Tastendruck auf, insbesondere wenn Text eingegeben wird. Die Reihenfolge der Ereignisse in WebKit-Browsern ist wie folgt:

  • Keydown
  • Keypress
  • TextInput
  • Keyup

Interaktive Demonstration

Zur Visualisierung des Ereignisauslösers Versuchen Sie es mit dem folgenden Codeausschnitt:

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

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

Dieser Code protokolliert die Art des Ereignisses in der Konsole, wenn jede Taste gedrückt oder losgelassen wird. Es wird Ihnen helfen, die Unterschiede und die Reihenfolge dieser Ereignisse zu verstehen.

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen KeyDown, KeyUp und den veralteten KeyPress-Ereignissen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn