Détacher les événements en JavaScript

Dans cette leçon, nous apprendrons à détacher les gestionnaires d'événements qui avaient été précédemment attachés par nous aux éléments. Prenons par exemple le bouton suivant :

html<input id="button" type="submit">

Attachons la fonction func à ce bouton :

javascriptlet button = document.querySelector('#button');
button.addEventListener('click', func);

function func() {
  console.log('!!!');
}

Faisons maintenant en sorte que le gestionnaire d'événement se déclenche au premier clic, puis soit détaché du bouton. Pour cela, il existe une méthode spéciale removeEventListener. Cette méthode prend comme premier paramètre le type d'événement, et comme second - une référence à la fonction qui doit être détachée.

Généralement, cela signifie que le gestionnaire d'événement est détaché de la même manière qu'il a été attaché. C'est-à-dire que si nous l'avons attaché comme ceci : addEventListener('click', func), alors nous le détacherons avec les mêmes paramètres, comme ceci : removeEventListener('click', func).

Ainsi, résolvons la tâche que nous nous sommes fixée :

javascriptlet button = document.querySelector('#button');
button.addEventListener('click', func);

function func() {
  console.log('!!!');
  this.removeEventListener('click', func);
}