Rimozione degli eventi in JavaScript

In questa lezione impareremo a rimuovere gli gestori di eventi, che erano stati precedentemente associati da noi agli elementi. Supponiamo ad esempio di avere il seguente pulsante:

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

Associamo a questo pulsante la funzione func:

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

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

Ora facciamo in modo che il gestore dell'evento si attivi al primo click, e poi venga rimosso dal pulsante. Per questo esiste un metodo speciale removeEventListener. Questo metodo accetta come primo parametro il tipo di evento, e come secondo - un riferimento alla funzione che deve essere rimossa.

Di solito, questo significa che il gestore dell'evento viene rimosso nello stesso modo in cui è stato associato. Ciò significa che se lo abbiamo associato così: addEventListener('click', func), allora lo rimuoveremo con gli stessi parametri, in questo modo: removeEventListener('click', func).

Quindi, risolviamo il compito che ci siamo posti:

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

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

Data un link e un pulsante. Alla pressione del pulsante aggiungete alla fine del testo del link il contenuto del suo attributo href tra parentesi tonde. Fate in modo che questo aggiunta avvenga solo al primo click.

Data un pulsante, il cui valore è il numero 1. Fate in modo che al click su questo pulsante il suo valore aumenti ogni volta di uno. Dopo che il valore del pulsante raggiunge 10 - rimuovete il gestore dell'evento, in modo che il pulsante non risponda più al click.