Gli ultimi scenari relativi ai contesti sono forse quelli con il maggior potenziale di apprendimento e di miglioramento del codice.
Come sappiamo JavaScript è un linguaggio event driven, nel quale è possibile eseguire funzioni in risposta ad una o più determinate azioni effettuate dall'utente grazie all'engine interno del linguaggio che invoca le corrette funzioni precedentemente assegnate.
All'interno di queste funzioni callback (definite in questo modo perché vengono fatte "scattare" non dal programmatore ma dal motore interno) l'oggetto this assume un'importanza notevole. È necessario però introdurre una distinzione a livello di assegnazione di callback ad eventi.
Esistono infatti due meccanismi diversi che presentano comportamenti successivi diversi.
Se assegniamo la callback tramite un particolare comando JavaScript, la funzione verrà eseguita nel contesto dell'oggetto sul quale l'evento è scattato; se invece assegniamo la callback direttamente inline nell'HTML essa verrà eseguita in un contesto più grande: l'oggetto window. Approfondiamo con un esempio:
<script type="text/javascript">
function controllaScope() {
alert(this.tagName || "Niente tagName, sono window");
}
window.onload = function() {
document.getElementsByTagName("button")[1].onclick = controllaScope;
document.getElementsByTagName("a")[1].onclick = controllaScope;
}
</script>
<button onclick="controllaScope()">Bottone 1</button>
<button>Bottone 2</button>
<a href="#" onclick="controllaScope()">Link 1</a>
<a href="#">Link 2</a>Nonostante la funzione sia uguale sia per bottoni che per le ancore, cambia il metodo di assegnamento di essa all'evento onclick e quindi cambia anche l'ambiente di esecuzione. Il primo bottone e la prima ancora verranno eseguiti all'interno di window (window.tagName ritorna null, quindi l'alert visualizzerà la stringa inserita manualmente); il secondo bottone e la seconda ancora stamperanno invece il proprio tagName (rispettivamente BUTTON e A).
Oltre a queste due modalità di assegnamento di eventi, è consigliabile utilizzare un event framework come Prototype, JQuery o YUI per avere una gestione degli eventi più semplice e soprattutto cross-browser.