Comprendre onKeypress vs. onkeyup vs. onkeydown

Lors de la recherche des différences entre ces trois événements, vous pouvez rencontrer une idée erronée commune que Onkeypress se produit simultanément avec OnkeyUp. Clarifions cette confusion et faisons la lumière sur les caractéristiques uniques de chaque événement.

une chronologie de l'événement

Dans la séquence des événements d'entrée de clé, nous avons la rupture suivante:

1. onkeydown: déclenché lorsque l'intermédiaire appuye initialement un Key.
2. onKeyPress: déprécié et recommandé d'utiliser sur onkeydown à la place. key.
3. Analogy with Mouse EventsTo grasp the relationships between these key events, let's draw an analogy with their mouse counterparts:

onKeyDown: Equivalent to MouseDown

onKeyPress: Equivalent to Click (Now deprecated and replaced by onKeyDown)

onkeyup: équivalent à sourisup
• exception du navigateur: webkit
• Dans le monde des navigateurs Web, WebKit se distingue en introduisant un événement supplémentaire: textInput. La séquence d'événements pour WebKit devient ainsi:

keydown pression des clés textInput KeyUp

Démonstration pratique

Pour assister à ces événements en action, exécutez l'extrait de code suivant:

keydown
keypress
textInput     
keyup

window.addeventListener ("keyup", log); window.addeventListener ("Keypress", log); window.addeventListener ("keydown", log); Fonction Log (événement) { console.log (event.type); }

Ce script enregistre le type d'événement dans la console lorsque vous interagissez avec le clavier. Vous remarquerez la séquence distincte des événements lorsque vous appuyez et libérez les touches.