Ascoltare un click

In parole semplici

Un evento è qualcosa che succede nella pagina. Il clic è il primo evento da imparare: JavaScript resta in ascolto e reagisce quando avviene.

Questa lezione fa parte del modulo Rendere interattiva una pagina. L’obiettivo del modulo è: Collegare JavaScript a HTML in modo graduale: selezionare elementi, reagire a eventi, leggere form e salvare dati.

Parole nuove

• evento: azione che succede nella pagina.
• addEventListener: metodo per ascoltare un evento.

Cosa impari

• Capire il concetto senza partire da definizioni astratte.
• Vedere un esempio piccolo che puoi copiare e modificare.
• Collegare l’argomento al risultato del modulo: una todo list semplice che salva le attività nel browser.

Esempio da copiare

<button id="bottone">Cambia messaggio</button>
<p id="messaggio">Messaggio iniziale</p>

<script>
  const bottone = document.querySelector("#bottone");
  const messaggio = document.querySelector("#messaggio");

  bottone.addEventListener("click", () => {
    messaggio.textContent = "Hai cliccato il bottone";
  });
</script>

Non devi memorizzare tutto subito. Prima copia l’esempio, fallo funzionare e cambia una cosa alla volta.

Esercizio guidato

1. Crea un bottone e un paragrafo.
2. Seleziona entrambi.
3. Aggiungi un listener al click.
4. Nel listener cambia il testo del paragrafo.
5. Clicca più volte e verifica.

Controllo finale

Hai finito quando il testo cambia solo dopo il clic.