Eventi

Bentornato.

Nella lezione precedente hai imparato il DOM.

Il DOM permette a JavaScript di leggere e modificare la pagina web.

Molto utile.

Molto visibile.

Molto energia da “guarda, la pagina si muove!”

Ma ora ci serve qualcosa di ancora più importante.

Interazione.

Una pagina non dovrebbe solo stare lì come un poster molto costoso.

Dovrebbe reagire.

Quando un utente clicca un pulsante, qualcosa dovrebbe succedere.

Quando un utente scrive testo, qualcosa dovrebbe succedere.

Quando un utente invia un form, qualcosa dovrebbe succedere.

Qui entrano in scena gli eventi.

Gli eventi sono il modo in cui JavaScript reagisce agli utenti.

Il browser dice:

È successo qualcosa.

JavaScript risponde:

Ho una funzione per quello.

E lo sviluppo frontend comincia.

Con fiducia.

E qualche urlo occasionale.

Cosa Imparerai

In questa lezione imparerai:

che cosa sono gli eventi;
come funzionano gli event listener;
come usare addEventListener;
come reagire ai click;
come reagire alla digitazione;
come usare l’oggetto event;
come gestire l’invio dei form;
come usare preventDefault;
come lavorare con eventi della tastiera;
come costruire un piccolo form di feedback interattivo.

Alla fine di questa lezione, le tue pagine reagiranno alle azioni dell’utente.

I pulsanti risponderanno.

Gli input aggiorneranno il testo.

I form smetteranno di comportarsi come animali selvaggi.

Più o meno.

Che Cos'è un Evento?

Un evento è qualcosa che succede nel browser.

Esempi:

l’utente clicca un pulsante;
l’utente scrive in un input;
l’utente invia un form;
l’utente muove il mouse;
l’utente preme un tasto;
la pagina finisce di caricarsi.

Gli eventi succedono continuamente.

Il browser è praticamente una receptionist molto impegnata che dice:

Click avvenuto.
Tasto premuto.
Input cambiato.
Form inviato.
Mouse mosso.
Altro click.
Aiuto.

JavaScript può ascoltare questi eventi.

Poi può eseguire una funzione.

Quella funzione decide cosa deve succedere dopo.

Crea il Progetto

Crea una cartella per questa lezione:

mkdir javascript-lesson8
cd javascript-lesson8
touch index.html
touch script.js

Il progetto dovrebbe essere così:

javascript-lesson8/
  index.html
  script.js

Apri la cartella nel tuo editor.

Oggi costruiamo pagine interattive.

Il browser non mostra più solo contenuto.

Si prepara ad ascoltare.

Come un operatore del supporto clienti molto teatrale.

Scrivi l'HTML

Apri index.html e aggiungi questo:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Eventi</title>
</head>
<body>
  <h1>Eventi</h1>

  <button id="helloButton">Dì Ciao</button>

  <p id="message">Clicca il pulsante.</p>

  <script src="script.js"></script>
</body>
</html>

Ora apri script.js.

Abbiamo:

un pulsante;
un paragrafo;
JavaScript pronto a reagire.

Molto semplice.

Molto potente.

Come un piccolo cacciavite che può sistemare internet per sbaglio.

Il Tuo Primo Event Listener

Per reagire a un evento, usiamo addEventListener.

Aggiungi questo a script.js:

const helloButton = document.getElementById("helloButton");
const messageElement = document.getElementById("message");

function sayHello() {
  messageElement.textContent = "Ciao da JavaScript!";
}

helloButton.addEventListener("click", sayHello);

Aggiorna il browser.

Clicca il pulsante.

Il messaggio cambia.

Complimenti.

La tua pagina ha reagito a un’azione dell’utente.

È un momento importante.

La pagina non è più un poster.

Ora è un poster leggermente intelligente.

Come Funziona addEventListener

Guarda questa riga:

helloButton.addEventListener("click", sayHello);

Significa:

Quando il pulsante viene cliccato, esegui la funzione sayHello.

Ci sono due parti importanti:

"click"

Questo è il tipo di evento.

sayHello

Questa è la funzione che deve essere eseguita.

Importante:

Scriviamo:

sayHello

non:

sayHello()

Perché?

Perché non vogliamo eseguire la funzione subito.

Vogliamo dare la funzione a JavaScript e dire:

Eseguila più tardi, quando avviene il click.

Se scrivi questo:

helloButton.addEventListener("click", sayHello());

la funzione parte immediatamente.

Questa è una trappola classica per principianti.

Aspetta dietro la porta con una buccia di banana.

Eventi Click

L’evento click è uno degli eventi più comuni.

Esempio:

const button = document.getElementById("helloButton");

button.addEventListener("click", function () {
  console.log("Pulsante cliccato!");
});

Qui usiamo una funzione anonima.

Anonima significa che la funzione non ha nome.

Viene creata direttamente dentro addEventListener.

Va bene per azioni piccole.

Ma per logiche più grandi, le funzioni con nome sono di solito più pulite:

function handleClick() {
  console.log("Pulsante cliccato!");
}

button.addEventListener("click", handleClick);

Entrambi i modi funzionano.

Usa quello che rende il codice più leggibile.

Il codice leggibile è un regalo al tuo futuro io.

E il tuo futuro io è già stanco.

L'Oggetto Event

Quando un evento succede, JavaScript può darci informazioni su quell’evento.

Queste informazioni sono dentro l’oggetto event.

Esempio:

helloButton.addEventListener("click", function (event) {
  console.log(event);
});

Clicca il pulsante e guarda la console.

Vedrai molte informazioni.

Molte.

Forse troppe.

Il browser dice:

Volevi dettagli sull’evento?
Ecco una valigia.

L’oggetto event può dirci cose come:

quale elemento è stato cliccato;
quale tasto è stato premuto;
quale valore è cambiato;
se il form è stato inviato.

Molto utile.

Molto dettagliato.

Leggermente travolgente.

event.target

Una proprietà molto utile è event.target.

Ci dice quale elemento ha causato l’evento.

Esempio:

helloButton.addEventListener("click", function (event) {
  console.log(event.target);
});

Quando clicchi il pulsante, la console mostra l’elemento button.

event.target significa:

L’elemento che ha attivato l’evento.

Questo è utile quando una funzione gestisce molti elementi.

Molti pulsanti.

Molte card.

Molte piccole fonti di caos.

Eventi Input

Gli eventi non sono solo per i pulsanti.

Funzionano anche con gli input.

Aggiorna index.html:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Eventi</title>
</head>
<body>
  <h1>Eventi</h1>

  <label for="nameInput">Il tuo nome:</label>
  <input id="nameInput" type="text" placeholder="Scrivi il tuo nome">

  <p id="preview">Il tuo nome apparirà qui.</p>

  <script src="script.js"></script>
</body>
</html>

Ora aggiorna script.js:

const nameInput = document.getElementById("nameInput");
const previewElement = document.getElementById("preview");

function updatePreview(event) {
  previewElement.textContent = `Ciao, ${event.target.value}!`;
}

nameInput.addEventListener("input", updatePreview);

Aggiorna il browser.

Scrivi il tuo nome.

Il paragrafo si aggiorna mentre scrivi.

Questo è l’evento input.

Si attiva ogni volta che il valore dell’input cambia.

Molto utile per:

anteprime live;
campi di ricerca;
messaggi di validazione;
form;
piccoli momenti di magia frontend.

Ottenere il Valore di un Input

Il valore di un input è salvato in .value.

Esempio:

const nameInput = document.getElementById("nameInput");

console.log(nameInput.value);

Dentro una funzione evento, puoi usare:

event.target.value

Esempio:

function updatePreview(event) {
  const name = event.target.value;
  previewElement.textContent = `Ciao, ${name}!`;
}

Questo è molto comune.

L’utente scrive.

JavaScript legge il valore.

La pagina si aggiorna.

Semplice.

Pulito.

Come lavare i piatti subito invece di creare un disastro in cucina.

Raro.

Ma bellissimo.

Eventi della Tastiera

JavaScript può anche reagire alla tastiera.

Esempio:

document.addEventListener("keydown", function (event) {
  console.log(`Hai premuto: ${event.key}`);
});

Aggiorna il browser.

Premi dei tasti.

La console mostra quale tasto hai premuto.

Esempi:

Hai premuto: a
Hai premuto: Enter
Hai premuto: Escape

Gli eventi della tastiera sono utili per:

scorciatoie;
giochi;
comportamento della ricerca;
chiudere modali con Escape;
interfacce accessibili da tastiera.

Non abusare delle scorciatoie.

Nessuno vuole un sito dove premendo K compri per sbaglio un frigorifero.

Eventi Submit dei Form

I form hanno un evento speciale chiamato submit.

Aggiorna index.html:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Eventi</title>
</head>
<body>
  <h1>Eventi</h1>

  <form id="contactForm">
    <label for="emailInput">Email:</label>
    <input id="emailInput" type="email" placeholder="tu@example.com">

    <button type="submit">Invia</button>
  </form>

  <p id="formMessage">Invia il form.</p>

  <script src="script.js"></script>
</body>
</html>

Ora aggiorna script.js:

const contactForm = document.getElementById("contactForm");
const emailInput = document.getElementById("emailInput");
const formMessage = document.getElementById("formMessage");

function handleSubmit(event) {
  event.preventDefault();

  formMessage.textContent = `Grazie! Abbiamo ricevuto: ${emailInput.value}`;
}

contactForm.addEventListener("submit", handleSubmit);

Aggiorna il browser.

Scrivi un’email.

Invia il form.

La pagina non si ricarica.

Il messaggio cambia.

Molto bello.

Molto frontend.

Molto “ora controlliamo il caos.”

Perché preventDefault È Importante

Di default, quando un form viene inviato, il browser ricarica la pagina.

È il comportamento normale del browser.

Ma nei progetti JavaScript spesso vogliamo gestire il form da soli.

Quindi usiamo:

event.preventDefault();

Questo significa:

Ferma il comportamento predefinito del browser.
Ci penso io con JavaScript.

Senza questo, la pagina si ricarica.

Il messaggio sparisce.

L’anima lascia il corpo.

Poi ti ricordi preventDefault.

Classico.

Più Event Listener

Un elemento può avere più event listener.

Esempio:

const button = document.getElementById("helloButton");

button.addEventListener("click", function () {
  console.log("Primo listener");
});

button.addEventListener("click", function () {
  console.log("Secondo listener");
});

Quando il pulsante viene cliccato, entrambe le funzioni partono.

Può essere utile.

Ma attenzione.

Troppi listener possono rendere il codice difficile da seguire.

Il tuo pulsante non dovrebbe avere la complessità emotiva di un romanzo investigativo.

Tieni tutto organizzato.

Costruire un Form di Feedback Interattivo

Ora costruiamo un piccolo form di feedback.

Aggiorna index.html:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Eventi</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 700px;
      margin: 60px auto;
      padding: 0 24px;
      background-color: #f3f4f6;
      color: #111827;
    }

    .card {
      background-color: white;
      padding: 24px;
      border: 2px solid #e5e7eb;
      border-radius: 18px;
    }

    h1 {
      font-size: 42px;
    }

    label {
      display: block;
      margin-top: 16px;
      font-weight: 700;
    }

    input,
    textarea {
      width: 100%;
      margin-top: 8px;
      padding: 12px;
      border: 2px solid #d1d5db;
      border-radius: 12px;
      font-size: 18px;
      box-sizing: border-box;
    }

    textarea {
      min-height: 120px;
    }

    button {
      margin-top: 18px;
      background-color: #2563eb;
      color: white;
      border: none;
      padding: 14px 20px;
      border-radius: 999px;
      font-weight: 700;
      cursor: pointer;
    }

    button:hover {
      background-color: #1d4ed8;
    }

    .message {
      margin-top: 20px;
      padding: 16px;
      border-radius: 14px;
      background-color: #eff6ff;
      border: 2px solid #bfdbfe;
    }

    .error {
      background-color: #fef2f2;
      border-color: #fecaca;
      color: #991b1b;
    }

    .success {
      background-color: #ecfdf5;
      border-color: #bbf7d0;
      color: #166534;
    }
  </style>
</head>
<body>
  <h1>Eventi</h1>

  <div class="card">
    <form id="feedbackForm">
      <label for="nameInput">Nome</label>
      <input id="nameInput" type="text" placeholder="Il tuo nome">

      <label for="feedbackInput">Feedback</label>
      <textarea id="feedbackInput" placeholder="Scrivi il tuo feedback"></textarea>

      <button type="submit">Invia Feedback</button>
    </form>

    <p id="message" class="message">Compila il form e invialo.</p>
  </div>

  <script src="script.js"></script>
</body>
</html>

Ora aggiorna script.js:

const feedbackForm = document.getElementById("feedbackForm");
const nameInput = document.getElementById("nameInput");
const feedbackInput = document.getElementById("feedbackInput");
const messageElement = document.getElementById("message");

function showMessage(text, type) {
  messageElement.textContent = text;
  messageElement.className = `message ${type}`;
}

function handleFeedbackSubmit(event) {
  event.preventDefault();

  const name = nameInput.value;
  const feedback = feedbackInput.value;

  if (name === "" || feedback === "") {
    showMessage("Compila tutti i campi.", "error");
    return;
  }

  showMessage(`Grazie, ${name}! Il tuo feedback è stato ricevuto.`, "success");

  nameInput.value = "";
  feedbackInput.value = "";
}

feedbackForm.addEventListener("submit", handleFeedbackSubmit);

Aggiorna il browser.

Prova a inviare il form vuoto.

Dovresti vedere un errore.

Compila il form.

Invialo di nuovo.

Dovresti vedere un messaggio di successo.

Il form reagisce.

Il DOM si aggiorna.

Gli input vengono svuotati.

Questo è molto vicino allo sviluppo web reale.

Non il backend completo.

Non il database.

Ma il comportamento frontend è reale.

La pagina ora risponde come una creatura civilizzata.

Più o meno.

Come Funziona Questo Codice

Questo trova il form e gli input:

const feedbackForm = document.getElementById("feedbackForm");
const nameInput = document.getElementById("nameInput");
const feedbackInput = document.getElementById("feedbackInput");
const messageElement = document.getElementById("message");

Questa funzione mostra un messaggio:

function showMessage(text, type) {
  messageElement.textContent = text;
  messageElement.className = `message ${type}`;
}

Questa funzione gestisce il form:

function handleFeedbackSubmit(event) {
  event.preventDefault();

  const name = nameInput.value;
  const feedback = feedbackInput.value;

  if (name === "" || feedback === "") {
    showMessage("Compila tutti i campi.", "error");
    return;
  }

  showMessage(`Grazie, ${name}! Il tuo feedback è stato ricevuto.`, "success");

  nameInput.value = "";
  feedbackInput.value = "";
}

Questo collega il form alla funzione:

feedbackForm.addEventListener("submit", handleFeedbackSubmit);

Schema importante:

Form inviato.

Comportamento predefinito fermato.

Valori degli input controllati.

Messaggio mostrato.

Input svuotati.

Questo schema appare ovunque.

Form di contatto.

Ricerca.

Checkout.

Internet è praticamente fatto di form con vestiti diversi.

Errori Comuni

Chiamare la Funzione Subito

Sbagliato:

button.addEventListener("click", handleClick());

Corretto:

button.addEventListener("click", handleClick);

Senza parentesi, passi la funzione.

Con le parentesi, la chiami subito.

Questo errore è molto comune.

Molto subdolo.

Molto JavaScript.

Dimenticare preventDefault nei Form

Sbagliato:

function handleSubmit(event) {
  messageElement.textContent = "Form inviato!";
}

Corretto:

function handleSubmit(event) {
  event.preventDefault();
  messageElement.textContent = "Form inviato!";
}

Senza preventDefault, la pagina può ricaricarsi.

Poi le modifiche spariscono.

Poi guardi lo schermo.

Poi ti ricordi.

Selezionare l'Elemento Sbagliato

Se questo restituisce null:

const button = document.getElementById("sendButton");

Controlla il tuo HTML.

Forse l’id è diverso.

Esempio:

<button id="submitButton">Invia</button>

Allora JavaScript deve usare:

const button = document.getElementById("submitButton");

Gli id devono combaciare esattamente.

JavaScript non è un detective.

Non indovina.

Dimenticare di Leggere .value

Sbagliato:

const name = nameInput;

Corretto:

const name = nameInput.value;

L’elemento input non è la stessa cosa del valore dentro l’input.

L’elemento è la scatola.

.value è ciò che l’utente ha scritto nella scatola.

Molto importante.

Scatola.

Contenuto.

Cose diverse.

Come scatola della pizza e pizza.

Non mangiare la scatola.

Pratica

Crea una pagina con:

un input;
un pulsante;
un paragrafo.

Quando l’utente scrive qualcosa e clicca il pulsante:

leggi il valore dell’input;
mostralo nel paragrafo;
svuota l’input.

Esempio:

const input = document.getElementById("textInput");
const button = document.getElementById("showButton");
const output = document.getElementById("output");

function showText() {
  output.textContent = input.value;
  input.value = "";
}

button.addEventListener("click", showText);

Poi aggiungi una condizione.

Se l’input è vuoto, mostra:

Scrivi qualcosa.

Esegui.

Cambia.

Rompi.

Sistema.

Gli eventi diventano normali solo dopo la pratica.

Non dopo aver pensato alla pratica.

Ho controllato.

Mini Challenge

Costruisci un piccolo form di login.

La pagina deve avere:

input email;
input password;
pulsante submit;
area messaggio.

Regole:

se l’email è vuota, mostra un errore;
se la password è vuota, mostra un errore;
se la password è più corta di 6 caratteri, mostra un errore;
altrimenti mostra un messaggio di successo.

Esempio di messaggio successo:

I dati di login sembrano validi.

Non costruire ancora un vero sistema di login.

Questa è solo validazione frontend.

Niente database.

Niente backend.

Niente bunker segreto da hacker.

Solo eventi, input e condizioni.

Comunque utile.

Comunque importante.

Riepilogo

Oggi hai imparato:

gli eventi sono cose che succedono nel browser;
JavaScript può ascoltare gli eventi;
addEventListener collega un evento a una funzione;
gli eventi click reagiscono ai click sui pulsanti;
gli eventi input reagiscono alla digitazione;
l’oggetto event contiene informazioni sull’evento;
event.target mostra l’elemento che ha attivato l’evento;
gli eventi della tastiera possono rilevare i tasti premuti;
gli eventi submit gestiscono i form;
preventDefault ferma il comportamento predefinito del browser;
i valori degli input si leggono con .value;
eventi e DOM insieme creano interazione.

Questo è un grande passo.

Il DOM permette a JavaScript di cambiare la pagina.

Gli eventi dicono a JavaScript quando cambiare la pagina.

Insieme creano vera interazione.

I pulsanti rispondono.

I form reagiscono.

I messaggi si aggiornano.

Gli utenti cliccano cose.

JavaScript prova a stare dietro a tutto.

Eroico.

Leggermente stressato.

Ma eroico.

Prossima Lezione

Nella prossima lezione studieremo i form e la validazione più in dettaglio.

I form sono ovunque nel web.

Form di contatto.

Campi di ricerca.

Checkout.

Iscrizioni alla newsletter.

Piccole scatole dove gli utenti scrivono il loro destino.

JavaScript ci aiuterà a controllare quei dati prima di mandarli da qualche parte.