Senza voler entrare troppo nei dettagli di un argomento certo molto complesso, vogliamo introdurre rapidamente qui l'uso di un'istruzione (in realtà tecnicamente si tratta della proprietà di un oggetto, ma lasciamo per adesso stare questi tecnicismi) che in molti casi consente di semplificare e di rendere più generale il codice scritto.
Consideriamo ancora una volta l'esempio dell'immagine sulla quale bisogna cliccare per cambiare l'immagine stessa. Nelle lezioni precedenti abbiamo affrontato il problema con la seguente funzione:
function muovi()
{
if (ind%2)
{
document.getElementById('omino').src='../immagini/omino2.jpg'
}
else
{
document.getElementById('omino').src='../immagini/omino1.jpg'
}
ind= ind + 1;
}
In realtà è possibile semplificare il codice precedente in questo modo:
function muovi()
{
if (ind%2)
{
event.target.src='../immagini/omino2.jpg'
}
else
{
event.target.src='../immagini/omino1.jpg'
}
ind= ind + 1;
}
L'espressione event.target equivale all'elemento (nel nostro caso l'elemento img) che ha dato origine all'evento cui è associata la funzione muovi(). Per dirla in modo ancora più semplice, possiamo usare
event.target.src='../immagini/omino2.jpg'
al posto di
document.getElementById('omino').src='../immagini/omino2.jpg'
e il codice funziona allo stesso modo e risulta indubbiamente semplificato.
C'è anche però un altro grande vantaggio nell'usare event.target per fare riferimento all'elemento su cui è stato fatto clic: in questo modo la stessa funzione può essere applicata a immagini diverse, senza che ci sia bisogno di riscrivere il codice. Se per esempio nella nostra pagina html ci fossero due immagini, ciascuna col proprio evento onclick associato alla stessa funzione muovi(), l'uso di event.target permetterebbe all'interno della funzione di risalire a quale delle due immagini a dato origine all'evento.
ATTENZIONE: purtroppo event.target non è standard su tutti i browser. Funziona correttamente su Chrome e Internet Explorer, ma non su Firefox Mozilla.
Molta confusione viene fatta talvolta dai programmatori fra event.target e la parola chiave this, di cui faremo cenno più avanti. Entrambi fanno riferimento in forma abbreviata a un oggetto (senza doverlo scrivere per esteso), ma con una differenza fondamentale:
- event.target rappresenta l'oggetto su cui è stato scatenato l'evento (il target dell'evento);
- this rappresenta l'oggetto proprietario di un certo metodo o di una certa funzione.
Per adesso ci limitiamo ad accennare a questa problematica e ci torneremo ancora più avanti.
Sito realizzato in base al template offerto da
http://www.graphixmania.it
