Quelle est la différence entre KeyDown, KeyUp et les événements KeyPress obsolètes ?

Comprendre les événements KeyPress, KeyUp et KeyDown

Pour faire la distinction entre les événements keypress, keyup et keydown, considérez-les comme analogues aux événements de souris : cliquez, mouseup et mousedown. L'événement onKeyDown se déclenche lorsque vous appuyez sur n'importe quelle touche, comme mouseup.

OnKeyUp se déclenche lorsque vous relâchez une touche, comme mouseup. Il est important de comprendre que vous pouvez relâcher une touche (onKeyUp) sans appuyer dessus au préalable (onKeyDown). Cela se produit souvent lorsque les touches sont maintenues enfoncées puis relâchées, déclenchant les deux événements.

OnKeyPress, cependant, est désormais obsolète et doit être remplacé par onKeyDown. Il combinait autrefois les événements onKeyDown et onKeyUp, se comportant de la même manière que onKeyPress, mais cette utilisation n'est plus recommandée.

Exception pour les navigateurs Webkit

Les navigateurs basés sur WebKit introduisent un élément supplémentaire événement : TextInput. Cet événement se produit entre la pression d'une touche et la saisie d'une touche, en particulier lorsque du texte est saisi. La séquence d'événements dans les navigateurs WebKit est la suivante :

• Keydown
• Keypress
• TextInput
• Keyup

Démonstration interactive

Pour visualiser la séquence de déclenchement de l'événement, essayez 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 code enregistre le type d'événement sur la console lorsque chaque touche est enfoncée ou relâchée. Cela vous aidera à comprendre les différences et l'ordre de ces événements.

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!