Événements et gestion des événements


Événements

Toute action (qu’elle soit générée par le système ou par l’utilisateur) à laquelle vous pouvez réagir est appelée un événement. La manière dont nous réagissons ou réagissons à une action est appelée gestion d’événements.

Par exemple, lorsqu’un utilisateur clique sur un bouton, nous pouvons lui montrer une fenêtre contextuelle avec un message. Dans ce cas, l’événement est clicket le gestionnaire affiche le popup.

Il y a une tonne d’événements qui se produisent sur une page web :

  1. Utilisateur survolant un élément
  2. Un formulaire est soumis
  3. Une vidéo a fini de passer
  4. L’utilisateur fait défiler une image
  5. Redimensionnement de la fenêtre du navigateur
  6. Les touches
  7. Chargement du document terminé

Tous ces éléments sont événements qui peuvent être traitées. Consultez cette liste massive de événements disponibles.

Gestionnaire d’événements

Je l’ai brièvement mentionné ci-dessus, mais un gestionnaire d’événements est la façon dont nous réagissons à un événement. Il s’agit d’un bloc de code qui s’exécute lorsqu’un événement se déclenche.

Nous utilisons event listeners et event handlers de manière interchangeable, et vous êtes libre de le faire.

Toutefois, il existe une petite distinction technique. listeners écouter quand un événement se produit, et la handler est le code qui est exécuté.

Chaque fois que nous associons un gestionnaire d’événements à un événement, nous l’appelons l’enregistrement d’un gestionnaire d’événements.

Exemples

Supposons que notre page web comporte un bouton.

 class="btn-primary">Click Me!

Nous pouvons y attacher un auditeur d’événement et afficher un message lorsque quelqu’un fait une click événement.

const myButton = document.querySelector(".btn-primary");

myButton.addEventListener("click", function() {
    console.log("The button was clicked");
});

Ce qui se passe ici :

  1. Nous saisissons le bouton de notre navigateur DOM (document object model) en utilisant le querySelector méthode. querySelector nous fournit le Nœud du bouton.
  2. Nous ajoutons un auditeur de l’événement avec addEventListener.
  3. addEventListener prend deux arguments.
  4. Le premier argument en faveur de addEventListener est le type d’événement. Dans ce cas, nous avons précisé click.
  5. Le deuxième argument est une fonction de rappel qui sera exécutée dès qu’un clic se produira.

Le navigateur saurait que chaque fois que l’utilisateur clique sur le bouton, il y a une click événement enregistré à ce bouton avec la classe btn-primary. Il exécutera ensuite le gestionnaire associé à l’événement. Le gestionnaire d’événement imprimera

Le bouton a été cliqué

La méthode de rappel fournie à l’auditeur de l’événement est une fonction anonyme. La fonction n’a pas de nom, et elle ne peut être référencée nulle part. Il n’est pas toujours nécessaire d’utiliser une fonction anonyme. Nous pouvons créer une fonction nommée et la transmettre. Une fonction nommée est préférable pour la réutilisation et pour nous donner la possibilité de supprimer l’auditeur de l’événement plus tard.

Utilisation de la fonction nommée

Le gestionnaire d’événements pourrait être une fonction nommée.

const myButton = document.querySelector(".btn-primary");

const handleClick = function() {
    console.log("The button was clicked");
};

myButton.addEventListener("click", handleClick);

Non seulement cela semble plus propre, mais cela présente également deux avantages.

  1. Réutilisation:
    Imaginez que vous ayez plus d’un bouton qui imprime le même relevé de la console. Une fonction nommée sera utilisée plusieurs fois sans répéter le code.
   const myButton = document.querySelector(".btn-primary");
   const secondButton = document.querySelector(".btn-second");
   const handleClick = function() {
       console.log("The button was clicked");
   };
   myButton.addEventListener("click", handleClick);
   secondButton.addEventListener("click", handleClick);
  1. Supprimer l’auditeur de l’événement:
    Le retrait des auditeurs de l’événement se fait à l’aide de removeEventListener. Nous devons faire passer deux arguments clés pour retirer un auditeur de l’événement. Le premier étant l’événement, et le second étant la méthode du gestionnaire d’événements. Nous ne pouvons pas spécifier le second paramètre si le rappel était une fonction anonyme. Dans le cas d’une fonction nommée, nous le ferions :
   myButton.removeEventListener("click", handleClick);

Soyez le premier à commenter

Poster un Commentaire

Votre adresse de messagerie ne sera pas publiée.


*