Gérer les auditeurs d’événements JavaScript avec paramètres

Les auditeurs d’événements JavaScript sont très importants, car ils existent dans presque toutes les applications Web qui nécessitent une interactivité. Aussi courants qu’ils soient, il est également essentiel pour eux d’être gérés correctement. Les auditeurs d’événements mal gérés peuvent conduire à des fuites de mémoire et peuvent parfois provoquer des problèmes de performances dans des cas extrêmes.

Voici le vrai problème: Les auditeurs d’événements JavaScript ne sont souvent pas supprimés après leur ajoute. Et lorsqu’ils sont ajoutés, ils ne nécessitent pas de paramètres la plupart du temps – sauf dans de rares cas, ce qui les rend un peu plus difficiles à gérer.

Un scénario commun où vous devrez peut-être utiliser des paramètres avec des gestionnaires d’événements est lorsque vous avez une liste dynamique de tâches, où chaque tâche de la liste a un bouton «Supprimer» attaché à un gestionnaire d’événements qui utilise l’ID de la tâche comme paramètre pour supprimer la tâche. Dans une situation comme celle-ci, c’est une bonne idée de supprimer l’auditeur d’événements une fois la tâche terminée pour s’assurer que l’élément supprimé peut être nettoyé avec succès, un processus appelé ordures collectéessur.

Une erreur courante lors de l’ajout d’auditeurs d’événements

Une erreur très courante lors de l’ajout de paramètres aux gestionnaires d’événements appelle la fonction avec ses paramètres à l’intérieur du addEventListener() méthode. C’est ce que je veux dire:

button.addEventListener('click', myFunction(param1, param2));

Le navigateur répond à cette ligne en appelant immédiatement la fonction, que l’événement de clic s’est produit ou non. En d’autres termes, la fonction est invoquée immédiatement au lieu d’être différée, donc elle ne se déclenche jamais lorsque l’événement de clic se produit réellement.

Vous pouvez également recevoir l’erreur de console suivante dans certains cas:

Cette erreur a du sens car le deuxième paramètre du addEventListener méthode ne peut accepter que une fonction javascript, un objet avec un handleEvent() Méthode, ou simplement null. Un moyen rapide et facile d’éviter cette erreur est de modifier le deuxième paramètre du addEventListener Méthode pour une flèche ou une fonction anonyme.

button.addEventListener('click', (event) => {
  myFunction(event, param1, param2); // Runs on click
});

Le seul hoquet à utiliser des fonctions flèches et anonymes est qu’ils ne peuvent pas être supprimés avec le traditionnel removeEventListener() méthode; vous devrez utiliser AbortControllerqui peut être exagéré pour des cas simples. AbortController brille lorsque vous avez plusieurs auditeurs d’événements à supprimer immédiatement.

Pour des cas simples où vous n’avez qu’un ou deux auditeurs d’événements à supprimer, le removeEventListener() La méthode s’avère toujours utile. Cependant, afin de l’utiliser, vous devrez stocker votre fonction comme référence à l’auditeur.

Utilisation de paramètres avec des gestionnaires d’événements

Il existe plusieurs façons d’inclure des paramètres avec des gestionnaires d’événements. Cependant, aux fins de cette démonstration, nous allons limiter notre objectif des deux suivantes:

Option 1: Flèches et fonctions anonymes

L’utilisation de fonctions flèches et anonymes est le moyen le plus rapide et le plus simple de faire le travail.

Pour ajouter un gestionnaire d’événements avec des paramètres à l’aide de flèches et des fonctions anonymes, nous devrons d’abord appeler la fonction que nous allons créer à l’intérieur de la fonction Arrow attachée à l’écouteur d’événements:

const button = document.querySelector("#myButton");

button.addEventListener("click", (event) => {
  handleClick(event, "hello", "world");
});

Après cela, nous pouvons créer la fonction avec des paramètres:

function handleClick(event, param1, param2) {
  console.log(param1, param2, event.type, event.target);
}

Notez qu’avec cette méthode, la suppression de l’écouteur d’événements nécessite le AbortController. Pour supprimer l’écouteur d’événements, nous créons un nouveau AbortController objet puis récupérer le AbortSignal Objet à partir de celui-ci:

const controller = new AbortController();
const { signal } = controller;

Ensuite, nous pouvons passer le signal de controller En option dans le removeEventListener() méthode:

button.addEventListener("click", (event) => {
  handleClick(event, "hello", "world");
}, { signal });

Maintenant, nous pouvons supprimer l’écouteur d’événements en appelant AbortController.abort():

controller.abort()

Option 2: fermetures

Les fermetures en JavaScript sont une autre fonctionnalité qui peut nous aider avec les gestionnaires d’événements. Rappelez-vous l’erreur qui a produit une erreur de type? Cette erreur peut également être corrigée avec les fermetures. Plus précisément, avec les fermetures, une fonction peut accéder aux variables à partir de sa portée extérieure.

En d’autres termes, nous pouvons accéder aux paramètres dont nous avons besoin dans le gestionnaire d’événements à partir de la fonction extérieure:

function createHandler(message, number) {
  // Event handler
  return function (event) {
  console.log(`${message} ${number} - Clicked element:`, event.target);
    };
  }

  const button = document.querySelector("#myButton");
  button.addEventListener("click", createHandler("Hello, world!", 1));
}

Cela établit une fonction qui renvoie une autre fonction. La fonction créée est alors appelée le deuxième paramètre dans le addEventListener() Méthode de sorte que la fonction intérieure est retournée en tant que gestionnaire d’événements. Et avec la puissance des fermetures, les paramètres de la fonction extérieure seront disponibles pour être utilisés dans la fonction intérieure.

Remarquez comment le event L’objet est mis à la disposition de la fonction intérieure. En effet, la fonction intérieure est ce qui est attaché en tant que gestionnaire d’événements. L’objet événement est transmis automatiquement à la fonction car c’est le gestionnaire d’événements.

Pour supprimer l’écouteur d’événements, nous pouvons utiliser le AbortController Comme nous l’avons fait auparavant. Cependant, cette fois, voyons comment nous pouvons faire cela en utilisant le removeEventListener() méthode à la place.

Pour le removeEventListener Méthode pour travailler, une référence au createHandler La fonction doit être stockée et utilisée dans le addEventListener méthode:

function createHandler(message, number) {
  return function (event) {
    console.log(`${message} ${number} - Clicked element:`, event.target);
  };
}
const handler = createHandler("Hello, world!", 1);
button.addEventListener("click", handler);

Maintenant, l’auditeur d’événements peut être supprimé comme ceci:

button.removeEventListener("click", handler);

Conclusion

Il est bon de toujours supprimer les auditeurs d’événements chaque fois qu’ils ne sont plus nécessaires pour éviter les fuites de mémoire. La plupart du temps, les gestionnaires d’événements ne nécessitent pas de paramètres; Cependant, dans de rares cas, ils le font. En utilisant des fonctionnalités JavaScript comme les fermetures, AbortControlleret removeEventListenerGestion des paramètres avec des gestionnaires d’événements est à la fois possible et bien soutenu.

(GG, YK)