KeyDown, KeyPress, KeyUp : quelle est la différence et quand devez-vous les utiliser ?

Comprendre onKeyPress vs. onKeyUp vs. onKeyDown

En recherchant les différences entre ces trois événements, vous pouvez rencontrer une idée fausse courante selon laquelle onKeyPress se produit simultanément avec onKeyUp. Clarifions cette confusion et mettons en lumière les caractéristiques uniques de chaque événement.

Une chronologie des événements

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

1. onKeyDown : Déclenché lorsque l'utilisateur appuie initialement sur un key.
2. onKeyPress : Obsolète et recommandé d'utiliser onKeyDown à la place. Cet événement s'est produit lorsque l'utilisateur a à la fois appuyé et relâché une touche, étant en fait une combinaison de onKeyDown et onKeyUp.
3. onKeyUp : Déclenché lorsque l'utilisateur relâche le bouton précédemment enfoncé key.

Analogie avec les événements de souris

Pour saisir les relations entre ces événements clés, faisons une analogie avec leurs homologues de souris :

• onKeyDown : Équivalent à MouseDown
• onKeyPress : équivalent à Click (maintenant obsolète et remplacé par onKeyDown)
• onKeyUp : Equivalent à MouseUp

Exception de navigateur : WebKit

Dans le monde des navigateurs web, WebKit se démarque en introduisant un événement supplémentaire : textInput. La séquence d'événements pour WebKit devient ainsi :

keydown
keypress
textInput     
keyup

Démonstration pratique

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

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

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!