Gestione degli eventi in JavaScript: click, input, tastiera e altro

Introduzione

Uno dei punti di forza di JavaScript è la possibilità di rendere le pagine web interattive rispondendo a ciò che fa l’utente: clic, digitazioni, passaggi del mouse, scroll e molto altro. Questo è possibile grazie al sistema di eventi.

In questo articolo scoprirai cosa sono gli eventi in JavaScript, come si usano i listener (addEventListener) e vedrai esempi pratici con click, input e tastiera.

Cosa sono gli eventi?

Gli eventi rappresentano azioni o accadimenti rilevati dal browser, come ad esempio:

• click del mouse
• pressione di un tasto
• modifica in un campo di input
• caricamento della pagina
• invio di un form

Sintassi di base con addEventListener

document.getElementById("pulsante").addEventListener("click", function() {
  alert("Hai cliccato!");
});

• "click" → tipo di evento
• function() → funzione eseguita all’evento

Eventi più comuni

Evento	Significato
click	Quando l’utente clicca
input	Quando cambia il valore di un input
keydown	Quando preme un tasto della tastiera
submit	Quando un form viene inviato
mouseover	Quando il mouse passa sopra un elemento
scroll	Quando l’utente scrolla la pagina

document.getElementById("pulsante").addEventListener("click", function() {
  alert("Hai cliccato!");
});

2. Rilevare input in tempo reale

<input type="text" id="nome">
<p id="output"></p>

<script>
document.getElementById("nome").addEventListener("input", function() {
  document.getElementById("output").innerText = "Hai scritto: " + this.value;
});
</script>

3. Rilevare tasto premuto

document.addEventListener("keydown", function(e) {
  console.log("Hai premuto: " + e.key);
});

Funzioni esterne e rimozione degli eventi

function saluto() {
  alert("Ciao!");
}

const btn = document.getElementById("pulsante");
btn.addEventListener("click", saluto);

// Rimuovere l'evento
btn.removeEventListener("click", saluto);

 

Best practice

• Usa sempre funzioni nominate se l’evento deve essere rimosso
• Evita onclick="..." nel markup HTML (meglio separare logica e struttura)
• Non abusare di addEventListener globali: rischiano conflitti
• Ricorda di rimuovere gli eventi nei componenti dinamici (es. SPA, modali)