Perchè accada un qualcosa, sia nella vita che in programmazione, c’è bisogno che "questo qualcosa" sia scatenato da un evento: nella vita, ad esempio, un incontro può far accadere qualcosa di piacevole (si spera!), in programmazione il click del mouse, la pressione di un pulsante, il resize della finestra, ecc. su possono scatenare una determinata routine.
In poche parole possiamo definire un evento Javascript come qualcosa che accade all’interno del documento HTML che è il nostro contesto. Nella maggior parte dei casi a scatenare l’evento è un comportamento ell’utente (ad esempio un click su un dato elemento della pagina) altre volte, invece, è una situazione contingente che prescinde da una qualsivoglia azione dell’utente (come ad esempio il caricamento della pagina).
Javascript supporta moltissimi eventi che, con l’evolversi del linguaggio, sono andati via via arricchendosi. In questa lezione vedremo gli eventi principali e più utilizzati e, soprattutto, vedremo come utilizzarli al fine di indirizzare il comportamento dei nostri script.
la sintassi degli eventi Javascript
L’evento si richiama direttamene all’interno dell’elemento HTML che lo riguarda, incorporando un attributo nel codice dell’elemento stesso; la seguente è la sintassi:
<elemento attributoEvento="istruzione Javascript">Vediamo un esempio pratico implementando un evento onclick su un pulsante:
<input type="button" value="Invia" onclick="alert('Hai cliccato!')">Dato che l’HTML non è un linguaggio case-sensitive (sensibile alle maiuscole ed alle minuscole) è indifferente scrivere onClick, onclick oppure ONCLICK, ma è necessario specificare i parametri (ad esempio il nome della funzione) con le giuste maiuscole e minuscole all’interno di un evento (Javascript, infatti, è case-sensitive).
I principali eventi Javascript
Riporto qui sotto un elenco degli eventi e dei relativi gestori, con opportuna descrizione.
Gli eventi del tag <body>: onload, onunload, onresize e onscroll
Due eventi molto utilizzati in associazione al corpo della pagina sono onload e onunload attraverso i quali si intercetta, rispettivamente, l’apertura e la chiusura della pagina. Vediamo qualche esempio:
<body onload="alert('Benvenuto!');"><body onunload="alert('Torna a trovarci!');">Da segnalare che l’evento onload può essere efficacemente applicato anche al tag <img> per identificare il momento in cui la data immagine viene effettivamente scaricata dal browser.
Altri eventi associabili al corpo della pagina sono onresize e onscroll che servono, rispettivamente, ad intercettare il ridimensionamento della finestra e lo scrolling al suo interno. Quest’ultimo evento, oltre che al tag <body>, può essere associato anche ad altri elementi della pagina come, ad esempio, un DIV con overflow:scroll.
Gli eventi legati al mouse: onclick, onmouseover, onmouseout, ecc.
L’attività del mouse è, solitamente, uno dei fattori più rilevanti all’interno di buona parte delle applicazioni web. Un click su un elemento o il passaggio del cursore in una determinata porzione della pagina, infatti, sono tra gli eventi più comunemente utilizzati. I più importanti di questi sono:
- onclick – click col tasto sinistro del mouse;
- ondblclick – doppio click col tasto sinistro del mouse;
- oncontextmenu – click col tasto destro del mouse;
- onmouseover – ingresso del mouse su un dato elemento;
- onmouseout – uscita del mouse da un dato elemento;
- onmousemove – il cursore del mouse si sta muovendo sopra un dato elemento;
Questi eventi possono essere associati ad una molteplicità di tag HTML come, ad esempio, immagini, div, paragrafi, bottoni, ecc.
Vediamo di seguito alcuni esempi:
<img src="foto.jpg" onclick="alert('Hai cliccato la foto!')">
<img src="foto.jpg" ondblclick="alert('Hai fatto doppio click sulla foto!')">
<img src="foto.jpg" onmouseover="alert('Sei passato col mouse sulla foto!')">
<img src="foto.jpg" onmouseout="alert('Hai spostato il mouse fuori dalla foto!')">Gli eventi legati alla tastiera: onkeypress, onkeydown e onkeyup
Un altra serie importante di eventi è scatenata dalla pressione, da parte degli utenti, dei tasti della tastiera del computer. Gli eventi rilevanti sono tre:
- onkeypress – generica pressione di un tasto;
- onkeydown – l’evento si scatena mentre l’utente sta premendo un tasto;
- onkeyup – l’evento si scatena quando l’utente rilascia un tasto che ha premuto;
Vediamo un esempio:
<input type="text" onkeydown="alert('hai premuto un tasto!')">Eventi legati ai form: onsubmit, onreset, onchange, ecc.
Una altra fitta serie di eventi Javascript è quella che riguarda i form ed i loro elementi.
I due eventi che riguardano il tag <form> sono onsubmit e onreset utilizzati, rispettivamente, per intercettare l’invio ed il reset di un modulo HTML. Esempi:
<form onsubmit="alert('Hai inviato il modulo!')">
<form onreset="alert('Hai cancellato il modulo!')">Gli eventi che riguardano i singoli elementi dei form (input, textarea, select, ecc.) sono, invece, molteplici. I più utilizzati sono:
- onfocus – l’elemento viene selezionato (e quindi attivato);
- onblur – l’elemento perde il focus (e quindi disattivato);
- onchange – l’elemento viene modificato nel contenuto;
Per fare un esempio: un campo input acquista il focus quando ci si clicca sopra per iniziare a scriverci dentro, viceversa lo perde quando si clicca su un altro elemento.
Per quanto riguarda l’evento change questo è tipico delle selectbox, dei campi input e delle textarea e si verifica quando, a seguito dell’azione dell’utente, si ha un cambiamento del loro contenuto..
Altri eventi
Oltre a quelli menzionati, Javascript supporta molteplici altri eventi legati, ad esempio, al trascinamento di un elemento draggable o alla riproduzione di elementi multimediali. In questa sede, tuttavia, non ritengo opportuno affrontare tematiche ulteriori a quelle "di base" e pertanto rinvio il lettore a futuri ad ulteriori approfondimenti.
