JavaScript: eventi, loop e closure

Sicuramente vi sarà capitato di dover assegnare lo stesso evento ad una serie di elementi del DOM con JavaScript. Questo è un caso speciale in cui le closure possono creare una serie di problemi se non se ne conosce il funzionamento.

Supponiamo di avere una serie di form con un campo di testo. Quando il form viene inviato vogliamo poter raccogliere il valore di ogni campo di testo:

var forms = document.querySelectorAll( ".test-form" );

for( var i = 0; i < forms.length; ++i ) {
	var form = forms[i];
	form.addEventListener( "submit", function() {
		var value = this.querySelector( "input.text" ).value;
		console.log( value );
	}, false);
}

Se testate questo codice noterete che solo l'ultimo valore dell'ultimo form viene restituito, anche se usiamo un form diverso dall'ultimo. Dobbiamo quindi spostare il codice dell'evento in una funzione specifica:

function displayValue( form ) {
	form.addEventListener( "submit", function() {
		var value = this.querySelector( "input.text" ).value;
		console.log( value );
	}, false);	
}

for( var i = 0; i < forms.length; ++i ) {
	var form = forms[i];
	displayValue( form );
}

Ora ogni form mostrerà il suo valore.