Newsgroup: it.comp.lang.javascript
Titolo: caricare dinamicamente evento gruppo checkbox

Salve a tutti
Ho un problema nel caricare dinamicamente un evento a un gruppo di
checkbox.
La parte html è quella che è, generata da asp.net....
Quello che faccio è prendere il contenitore (divMarcaAuto) e ciclo per
tutti gli elementi.
Se l'elemento è una checkbox aggiungo l'evento con il codice:
document.getElementById(id).addEventListener("click", function()
{alert("marca selezionata:" + value);}, false);
Il problema è cliccando su qualunque elemento, il codice mi visualizza
solo l'ultimo valore.
è come se nel ciclo i valori non persistessero.
ecco il codice:
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Untitled</title>
</head>
<body>
<div id="divMarcaAuto">
<table id="cblMarcaAuto">
<tr>
<td>
<input id="cblMarcaAuto_0" type="checkbox" name="cblMarcaAuto$0"
value="FORD" /><label for="cblMarcaAuto_0">FORD</label>
</td>
 
</tr>
<tr>
<td>
<input id="cblMarcaAuto_1" type="checkbox" name="cblMarcaAuto$1"
value="FIAT" /><label for="cblMarcaAuto_1">FIAT</label>
</td>
</tr>
 
<tr>
<td><input id="cblMarcaAuto_2" type="checkbox" name="cblMarcaAuto$2"
value="OPEL" /><label for="cblMarcaAuto_2">OPEL</label>
</td>
</tr>
 
<tr>
<td>
<input id="cblMarcaAuto_3" type="checkbox" name="cblMarcaAuto$3"
value="BMW" /><label for="cblMarcaAuto_3">BMW</label>
</td>
</tr>
</table>
 </div>
<script type="text/javascript">
function CaricaEventoCheckBox()
{
 		var elems =
document.getElementById('divMarcaAuto').getElementsByTagName('input');
 		for (var i = 0; i < elems.length; i++) 
		 {
			 	var el = elems[i];
				if (el.type === 'checkbox')
				{
					var id = 
el.id
;
					var value=el.value;
 
document.getElementById(id).addEventListener("click", function()
{alert("marca selezionata:" + value);}, false);
				}
		  }
}
 
CaricaEventoCheckBox()
</script>
</body>
</html>
 
 
grazie
 

)
 
4) Non è efficiente né comodo assegnare gestori di eventi a destra e a 
manca!
Studiati come avviene la propagazione degli eventi e vedrai che in 
questo caso è più comodo assegnare un solo gestore di click all'elemento 
contenitore dei checkbox.
In quest'unica funzione determini chi ha originato il click e agisci di 
conseguenza.
 
Per la propagazione cerca "event bubbling" e "event capturing", il 
meccanismo che ho appena descritto si chiama "event delegation".
 
 
 
 
 

devi creare una closure ... comunque il modo più semplice è questo:
 
function addClick(id, v)
{
  document.getElementById(id).addEventListener("click", function() {alert("marca selezionata:" + v);}, false);
}
function CaricaEventoCheckBox()
{
    var elems =
document.getElementById('divMarcaAuto').getElementsByTagName('input');
    for (var i = 0; i < elems.length; i++)
     {
        var el = elems[i];
        if (el.type === 'checkbox')
        {
          addClick(
el.id
, el.value);
        }
      }
}
 


Vado subito a studiare....
Grazie
 


Grazie.
 


Ho gogglato un po' in giro ed ho assegnato l'evento addEventListener
al solo contenitore come da te suggerito.
Il tutto funziona ma mi sono perso nella propagazione "event bubbling"
e "event capturing".
Nello spezzone di script che allego mi sembta funzioni il tutto senza
specificare nulla.
mi sono perso qualcosa?
<script type="text/javascript">
 
var el = document.getElementById('divMarcaAuto')
el.addEventListener("click", MostraMarca, false);
 
function MostraMarca(e)
{
	 var target = e.target;
	  if (target.type=="checkbox")
		{
			alert(target.value);
		}
 
}
</script>


Ti ringrazio per tutta la spiegazione.
A presto.