Il metodo addEventListener() in JavaScript

In Javascript, addEventListener() è un metodo dell'oggetto document che permette di ascoltare e reagire agli eventi che avvengono su un particolare elemento HTML.

addEventListener(type, listener)

Questa funzione si associa a un elemento e specifica due parametri fondamentali:

Type
Il tipo di evento che voglio ascoltare, come 'click', 'mouseover', ecc.
Listener
Una funzione che viene eseguita quando l'evento si verifica.

Quando si verifica l'evento, il listener lo rileva ed esegue la funzione che gli associato.

Perché usare questo metodo? Mi consente di aggiungere più listener allo stesso evento o allo stesso elemento. Inoltre, fornisce opzioni aggiuntive, come la possibilità di rimuovere l'ascoltatore con removeEventListener ed èsupportato in tutti i browser moderni.

Un esempio pratico

On questa pagina web ho un bottone.

<html>
<body>
<button id="mioBottone">Cliccami</button>
<script>
// Ottieni l'elemento dal DOM
var bottone = document.getElementById('mioBottone');
// Definisci la funzione che reagisce all'evento
function mostraMessaggio() {
alert('Hai cliccato il bottone!');
}
// Aggiungi l'ascoltatore di evento
bottone.addEventListener('click', mostraMessaggio);
</script>
</body>
</html>

Utilizzo il codice javascript per rilevare il click su questo bottone e poi eseguire una funzione che mostra un messaggio alert.

Per prima cosa ottengo il riferimento al del bottone tramite getElementById.

var bottone = document.getElementById('mioBottone');

Poi definisco una funzione mostraMessaggio che fa apparire un alert quando viene invocata.

function mostraMessaggio() {
alert('Hai cliccato il bottone!');
}

Utilizzo addEventListener per eseguire la funzione e visualizzare sullo schermo il messaggio "Hai cliccato il bottone!" quando il bottone viene cliccato.

bottone.addEventListener('click', mostraMessaggio);

In pratica, addEventListener è uno strumento che permette di interagire con la pagina web in maniera dinamica e reattiva agli input dell'utente.

E così.