Détecter les appuis sur les touches fléchées en JavaScript

1. Que sont les événements
2. Quels sont les EventListeners les plus courants en JavaScript
3. Keydown Event Listener en JavaScript

Ce didacticiel explique comment vous pouvez créer des raccourcis et configurer des raccourcis clavier à l’aide de certaines fonctions intégrées qui écoutent les entrées de l’utilisateur en JavaScript. Cet article comprendra également une description détaillée des événements et des EventListeners en JavaScript.

Que sont les événements

Dans cette perspective de codage, l’activité physique que nous effectuons provoque un événement. Ces événements sont le moteur de l’exécution du programme ; il est utile lorsque vous travaillez avec l’interface utilisateur graphique (GUI).

Nous pouvons créer ces raccourcis et raccourcis clavier en utilisant une procédure écouteur d'événement qui écoute un événement particulier et transmet cette information au gestionnaire pour gérer l’événement.

En termes simples, prend une entrée de la touche (souris ou clavier) enfoncée, nous pouvons également utiliser directement un gestionnaire d'événements qui traite ces événements. Nous allons démontrer les deux paradigmes en profondeur.

Quels sont les EventListeners les plus courants en JavaScript

Il existe de nombreux gestionnaires d’événements dans JS, ces deux sont les plus courants et leurs fonctions sont :

• keydown : s’enregistre lorsque vous appuyez sur une touche et continue de s’enregistrer si vous la maintenez enfoncée
• keyup : enregistre lorsque vous relâchez la clé

Keydown Event Listener en JavaScript

Le gestionnaire d’événements .onkeydown indique au compilateur d’exécuter une certaine function() dès que la touche souhaitée est enfoncée ; en plaçant une alert("message"), nous pouvons afficher une boîte d’alerte contenant un message spécifié.

Dans le code ci-dessous, nous utilisons deux propriétés d’événement, .key, qui renverra le libellé de la touche enfoncée, et .keyCode qui renverra le code de la touche particulière. Ces codes clés sont comme ASCII puisque chaque clé est mappée à une valeur alphanumérique particulière.

Dans notre exemple, nous entrons k comme paramètre de la fonction.

document.onkeydown = function(e) {
  alert(e.key + e.keyCode);  // shows k75
};

Dès qu’une touche particulière est enfoncée, nous recevons une alerte indiquant la touche enfoncée concaténée avec son code de touche. Les étiquettes de clé et les codes de clé facilitent la manipulation de la logique du code et sont largement utilisés dans les opérations pilotées par les événements.

Regardons un exemple qui montre comment nous pouvons utiliser ces paramètres à notre avantage.

document.onkeydown = function(e) {
  switch (e.keyCode) {
    case 37:
      alert('left');  // show the message saying left"
      break;
    case 38:
      alert('up');  // show the message saying up"
      break;
    case 39:
      alert('right');  // show the message saying right"
      break;
    case 40:
      alert('down');  // show the message saying down"
      break;
  }
};

Ici, nous utilisons un boîtier de commutation simple qui prend en compte le code de la touche enfoncée, vérifie à quel boîtier il appartient et l’évalue pour afficher un message. Disons que nous appuyons sur la touche fléchée gauche ; puis il affichera l’alerte gauche, et ainsi de suite.

Nous pouvons également définir l’écouteur d’événement de cette manière :

document.addEventListener('keydown', function(event) {});

Ici, nous examinons un autre paradigme et en quoi il diffère de notre approche précédente :

document.addEventListener('keydown', function(event) {
  if (event.key == 'ArrowLeft') {
    alert('Left key');  // show the message saying Left key"
  } else if (event.key == 'ArrowUp') {
    alert('Up key');  // show the message saying Up key"
  } else if (event.key == 'ArrowRight') {
    alert('Right key');  // show the message saying Right key"
  } else if (event.key == 'ArrowDown') {
    alert('Down key');  // show the message saying Down key"
  }
});

Ce code semble donner le même résultat que notre code précédent. Pourtant, il y a un hic, ici au lieu d’utiliser explicitement des codes de touches pour jouer avec notre logique, nous utilisons des étiquettes de touches telles que Flèche vers le bas et Flèche vers le haut qui directement et les comparent pour afficher le message souhaité.

Supposons que nous ayons appuyé sur la flèche vers le haut, nos blocs de code if vérifieront si l’étiquette de clé renvoyée par la fonction correspond aux étiquettes de clé données. Si c’est le cas, alors ce bloc est exécuté, affichant un message.

Maintenant, nous n’avons plus besoin de nous souvenir des codes de chaque touche lorsque nous pouvons nous souvenir des étiquettes de touches mnémoniques qui sont beaucoup plus faciles à retenir. C’est extrêmement pratique lorsque nous ne connaissons pas les codes des touches et que nous nous efforçons de logique.