Gli eventi in javascript

Un evento in javascript è un preciso istante durante il ciclo di vita di una pagina web o di un suo elemento oppure un particolare comportamento interattivo dell’utente.

Il linguaggio del web ci offre diversi eventi su cui applicare i nostri handler:

Tipo Evento – Descrizione

• Abort – Il caricamento di un immagine viene annullato
• Blur – L’elemento perde il focus. ( premendo tab o cliccando su un altro elemento)
• Change – Cambia lo stato dell’elemento
• Click – L’utente clicca su di un elemento
• DblClick – L’utente clicca due volte rapidamente su di un elemento
• Focus – Un elemento ottiene il focus ( cioè viene selezionato con un click del mouse o con il tasto tab )
• KeyDown – Viene premuto un tasto della tastiera
• KeyPress – Viene premuto un tasto della tastiera o mentenuto premuto
• KeyUp – Viene rilasciato un tasto della tastiera
• Load – Viene caricato un elemento
• MouseDown – Viene premuto un tasto del mouse
• MouseMove – Viene spostato il cursore del mouse
• MouseOut – Il cursore del mouse viene spostato da sopra l’elemento
• MouseOver – Il cursore del mouse viene posto sopra l’elemento
• MouseUp – Viene rilasciato un tasto del mouse
• Move – Viene spostata la posizione della finestra
• Reset – Viene premuto il tasto reset del form
• Resize – Viene ridimensionata la finestra
• Select – Viene selezionato del testo all’interno dell’elemento
• Submit – Viene premuto il tasto submit del form
• Unload – L’utente abbandona la pagina

Se avete dubbi: consultate sempre la documentazione!

Vediamo ora come possiamo gestire gli eventi.

Event handling tramite attributi html

L’html offre vari attributi per ogni tag che consentono la gestione degli eventi. Il nome di questi attributi corrisponde al nome dell’evento con prefisso ‘on’.

1 function myFunction () { alert( "viva javascript!!") }

Possiamo utilizzarla come handler dell’evento click in questo modo:

1 <input  id="myInputText" type='text' onchange="alert('testo cambiato!')"   onclick="myFunction()"  ></input>

Come vedete possiamo inserire come valore per l’attributo direttamente del codice javascript che verrà correttamente eseguito.

Event handling tramite Dom

È possibile gestire un evento anche direttamente da javascript senza dover sporcare il codice html, rendendo molto più semplice la manutenzione del codice e migliorandone la leggibilità. Gli elementi del DOM hanno proprietà predefinite su cui è possibile applicare le nostre funzioni di handling:

1 document.getElementById("myInputText").onclick=myFunction;