Introduzione agli eventi

Gli eventi sono notifiche che il browser invia quando accadono determinate azioni. Possiamo "ascoltarle" e rispondere tramite funzioni chiamate gestori di eventi. Vediamo come funzionano e i principali metodi di utilizzo.

• onclick – evento scatenato da un clic su un elemento.
• onmouseover – quando il puntatore passa sopra un elemento.
• onkeydown – quando un tasto della tastiera viene premuto.

Gestione eventi con attributo HTML

Un metodo semplice ma meno consigliato è inserire direttamente l’attributo onclick (o simili) nell’HTML. In questo modo il codice JavaScript viene legato all’elemento stesso.

Codice Esempio: evento inline

CODE: HTML

1. <button onclick="alert('Hai cliccato il pulsante!')">Clicca qui</button>

Gestione eventi con proprietà JavaScript

Un approccio migliore è associare la funzione al gestore tramite JavaScript, usando le proprietà dell’elemento come onclick.

Codice Esempio: proprietà evento

CODE: Javascript

1. // seleziono il bottone

2. let btn = document.getElementById("mioBottone");

4. // associo una funzione all'evento onclick

5. btn.onclick = function() {

6.   alert("Hai premuto il bottone!");

7. };

Gestione eventi con addEventListener

Il metodo più flessibile e moderno è addEventListener(), che permette di aggiungere più gestori allo stesso evento e separare meglio HTML da JavaScript.

Codice Esempio: addEventListener

CODE: Javascript

1. // seleziono l'elemento

2. let titolo = document.getElementById("titolo");

4. // aggiungo un evento di click

5. titolo.addEventListener("click", function() {

6.   titolo.style.color = "red"; // cambia il colore del testo

7. });

Tabella riassuntiva

Considerazioni

La gestione degli eventi è alla base dell’interattività delle pagine web. Tra i vari metodi, addEventListener è quello consigliato perché più potente e flessibile, mentre l’uso di attributi HTML è ormai sconsigliato.

Tabella riassuntiva eventi DOM per categoria