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 :

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

Attachons la fonction func à ce bouton :

let 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 :

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

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

Donnés un lien et un bouton. Au clic sur le bouton, ajoutez à la fin du texte du lien le contenu de son attribut href entre parenthèses. Faites en sorte que cette addition ne se produise qu'au premier clic.

Donné un bouton, dont la valeur est le nombre 1. Faites en sorte qu'au clic sur ce bouton sa valeur augmente à chaque fois de un. Après que la valeur du bouton ait atteint 10 - détachez le gestionnaire d'événement afin que le bouton ne réagisse plus au clic.