Il metodo removeEventListener() in Javascript
Il metodo removeEventListener() in JavaScript stacca un ascoltatore di eventi (o listener) da un elemento HTML.
element.removeEventListener(type, listener, [options]);
Questo metodo ha diversi parametri:
- element è l'elemento DOM dal quale voglio rimuovere l'ascoltatore di eventi. Può essere qualsiasi elemento HTML, come un pulsante, un'immagine, un form, ecc.
- type è una stringa che specifica il tipo di evento che voglio rimuovere. Ad esempio, "click", "mouseover", "keydown", ecc.
- listener è il riferimento alla funzione listener che è stata aggiunta in precedenza all'elemento e che ora intendo rimuovere. È importante che il riferimento sia esattamente lo stesso che ho usato in addEventListener.
- options (opzionale) mi permette di specificare caratteristiche aggiuntive relative all'event listener, come capture, once, e passive. Può essere un oggetto o un valore booleano.
Questo metodo rimuove il listener che ho indicato dall'elemento del DOM.
A cosa serve? Questo metodo ha molte applicazioni pratiche. Ad esempio, ho una pagina web e un pulsante. Quando qualcuno clicca su questo pulsante, viene visualizzato un messaggio in alert sullo schermo. Posso utilizzare removeEventListener per disattivare il pulsante.
Un esempio pratico
In questo documento HTML ci sono due pulsanti.
Il primo pulsante "mioPulsante" mostra un messaggio sullo schermo, mentre il secondo pulsante "fermaSaluto" disattiva il primo pulsante.
- <html>
- <body>
- <button id="mioPulsante">Saluta</button>
- <button id="fermaSaluto">Fine</button>
- <script>
- // Aggiungiamo il listener
- document.getElementById("mioPulsante").addEventListener("click", saluta);
- // Definizione del listener
- function saluta() {
- alert("Hello!");
- }
- // Rimozione del listener
- document.getElementById("fermaSaluto").addEventListener("click", function() {
- document.getElementById("mioPulsante").removeEventListener("click", saluta);
- });
- </script>
- </body>
- </html>
Al pulsante "mioPulsante" ho associato un Event Listener (ascoltatore) che esegue la funzione saluta() quando l'utente clicca sul bottone.
La funzione saluta() mostra un messaggio sullo schermo dell'utente.
document.getElementById("mioPulsante").addEventListener("click", saluta);
Al secondo pulsante "fermaSaluto", invece, ho associato il metodo removeEventListener("click", saluta); che stacca il listener dal primo pulsante.
document.getElementById("mioPulsante").removeEventListener("click", saluta);
Come si può vedere, entrambi i metodi fanno riferimento allo stesso listener, ossia la funzione saluta(), e allo stesso tipo di evento, ossia il click.
Come funziona lo script?
- Quando l'utente clicca sul primo pulsante viene mostrato un messaggio di alert con la scritta "Hello".
- Quando l'utente clicca sul secondo pulsante, il primo pulsante viene disabilitato. Da questo momento in poi, l'utente non visualizzerà più alcun messaggio quando ci clicca sopra.
In questo modo, l'utente interagisce con il sito che modifica il comportamento dei suoi elementi in tempo reale.
E così via.
