Supprimer l'écouteur d'événements en JavaScript

Ce tutoriel explique comment supprimer un écouteur d’événement en JavaScript.

Utilisez la méthode removeEventListener() pour supprimer l’écouteur d’événements en JavaScript

Si nous créons un élément et que nous ne voulons pas qu’il exécute son comportement prévu lorsque l’utilisateur interagit avec lui, nous devons supprimer l’écouteur d’événement de cet élément. Nous y parvenons en utilisant la fonction intégrée de JavaScript removeEventListener(). Cette fonction supprime l’écouteur d’événement attaché à un élément et arrête son action prédéfinie. Nous pouvons désactiver un clic sur un bouton en supprimant l’écouteur d’événement qui lui est attaché.

La fonction accepte les paramètres suivants :

1. type : C’est une chaîne spécifiant le type d’action utilisateur pour laquelle on veut supprimer l’écouteur d’événement.
2. listener : La fonction d’écoute d’événement que l’on veut supprimer dudit élément.
3. options : C’est un paramètre facultatif qui permet de spécifier les caractéristiques de l’écouteur d’événement. Les options suivantes peuvent être définies :
   • capture : C’est une variable booléenne indiquant que l’événement ira à l’écouteur enregistré avant de passer à n’importe quel événement cible dans l’arborescence DOM.
   • mozSystemGroup : Une variable booléenne qui indique que l’écouteur d’événement sera ajouté au groupe système. Il n’est disponible que pour le code exécuté dans le chrome de XBL/Firefox.
4. useCapture : C’est une variable booléenne qui indique si l’écouteur d’événement est un écouteur de capture. C’est aussi un paramètre facultatif.

var element_name = document.querySelector('#btn');
var count = 0;
var counter = function(event) {
  count++;
  // perform the intended function in case of occurence of event
  if (count == 2) {
    this.removeEventListener('click', myHandler);
  }
} element_name.addEventListener('click', counter);

Dans le code ci-dessus, nous ajoutons un écouteur d’événement et spécifions la fonction à exécuter si l’écouteur est déclenché. Si l’utilisateur essaie à nouveau de déclencher le même écouteur, nous supprimons l’écouteur d’événement en utilisant le removeEventListener(). Nous y parvenons en sélectionnant d’abord l’élément sur lequel nous voulons ajouter/supprimer l’écouteur d’événement. Ensuite, nous initialisons un compteur pour maintenir le décompte du nombre de clics. Enfin, nous déclarons le gestionnaire d’événements à déclencher et incrémentons également le nombre. Dans le cas où l’utilisateur clique deux fois, le removeEventListener() est déclenché.