Gli eventi in Javascript

Il linguaggio Javascript mi permette di far interagire una pagina web con le azioni degli utenti attraverso l'uso di eventi.

Cosa sono gli eventi? Gli eventi si verificano quando succede qualcosa di particolare. Ad esempio, un click dell'utente su un collegamento, il movimento del puntatore del mouse, il caricamento della pagina sul browser, ecc.

In questo modo, quando si verifica un particolare evento, posso far eseguire un codice in risposta alle azioni dell'utente.

Ad esempio, quando l'utente clicca su un elemento, posso utilizzare javascript per far apparire un menu a comparsa.

Per ottenere questo effetto (o qualsiasi altro) devo intercettare l'evento del click dell'utente nel documento tramite il "gestore degli eventi" (event handler) anche detto "listener" (ascoltatore) e chiamare il codice da eseguire quando si verifica quell'evento.

Nota. In javascript gli oggetti del BOM (Browser Object Model) e del DOM (Document Object Model) hanno eventi associati a loro, oltre ai metodi e alle proprietà.

Esistono diversi modi per collegare un codice a un evento utilizzando i gestori di eventi.

In genere, i gestori di eventi sono composti dalla parola "on" e dall'evento che gestiscono.

Ad esempio, l'evento di click ha il gestore di eventi onclick.

L'evento onclick si attiva quando un utente fa clic su un elemento specifico.

<html>
<body>
<h1 id="myHeading">Clicca su di me!</h1>
<button onclick="changeColor()">Cambia colore</button>
<script>
function changeColor() {
document.getElementById("myHeading").style.color = "red";
}
</script>
</body>
</html>

In questo esempio, l'evento onclick è collegato al pulsante e quando l'utente fa clic sul pulsante, viene eseguita la funzione changeColor che cambia il colore del testo dell'elemento <h1> in rosso.

L'evento di caricamento ha, invece, il gestore di eventi onload.

L'evento onload viene attivato quando un oggetto, come una pagina web, un'immagine o un file esterno, è stato completamente caricato.

<!DOCTYPE html>
<html>
<body onload="alert('La pagina web è stata completamente caricata.')">
<h2>Dimostrazione dell'evento onload</h2>
</body>
</html>

In questo esempio, l'evento onload è associato all'elemento <body> della pagina web.

Quando la pagina web viene completamente caricata, viene eseguita la funzione alert() associata all'evento.

Nota. Il gestore degli eventi onload è particolarmente utile quando devo eseguire del codice JavaScript che dipende da risorse esterne, come immagini o script, che potrebbero non essere ancora disponibili al momento in cui il codice viene eseguito.

Posso gestire gli eventi anche tramite le proprietà.

Ad esempio, creo un pulsante HTML sulla tua pagina web

<button id="myButton">Clicca Qui!</button>

Voglio eseguire una funzione JavaScript quando questo pulsante viene cliccato.

Per prima cosa definisco la funzione "ButtonClicked()" che voglio richiamare

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

Poi collego questa funzione all'evento 'click' del bottone

document.getElementById('myButton').onclick = buttonClicked;

In questo esempio, la funzione buttonClicked viene eseguita ogni volta che si fa clic sul pulsante con l'ID "myButton".

Sottolineo che non ho bisogno di scrivere buttonClicked() quando assego la funzione all'evento onclick. Questo perché stiamo passando un riferimento alla funzione, non chiamando la funzione stessa. Se avessi scritto buttonClicked(), la funzione sarebbe stata chiamata immediatamente quando la pagina si carica, invece di quando l'evento click effettivamente si verifica.

E così via.