¿Cómo generar controladores de eventos con bucle en Javascript?

Question

Por ejemplo, tengo 10 a las etiquetas generadas a partir de una respuesta AJAX:

<a href="#" id="b1">b1</a> 
<a href="#" id="b2">b2</a> 
<a href="#" id="b3">b3</a> 
<a href="#" id="b4">b4</a> 
<a href="#" id="b5">b5</a> 
<a href="#" id="b6">b6</a> 
<a href="#" id="b7">b7</a> 
<a href="#" id="b8">b8</a> 
<a href="#" id="b9">b9</a> 
<a href="#" id="b10">b10</a> 

necesito para asignar evento onclick a cada uno de ellos a través del bucle:

for(i=1; i<11; i++) { 
    document.getElementById("b"+i).onclick=function() { 
     alert(i); 
    } 
} 

Esto no funciona, se solo asigna onclick a la última etiqueta y alerta "11". ¿Cómo puedo hacer que esto funcione? Prefiero no usar jQuery.

Answer 1

Todos sus controladores comparten la misma variable i.

Es necesario poner cada manipulador en una función separada que lleva i como un parámetro para que cada uno tiene su propia variable:

function handleElement(i) { 
    document.getElementById("b"+i).onclick=function() { 
     alert(i); 
    }; 
} 

for(i=1; i<11; i++) 
    handleElement(i); 

Answer 2

Un cierre es lo que está buscando:

for(i=1; i<11; i++) { 
    (function(i) { 
     document.getElementById("b"+i).onclick=function() { 
      alert(i); 
     }; 
    })(i); 
} 

Answer 3

Hay dos formas de utilizar el cierre en este problema. La idea es crear un alcance con una instantánea de la variable "i" para cada iteración que utilizará el controlador de eventos.

Solución # 1 (como se mencionó por Kevin):

for(i=1; i<11; i++) { 
    (function(num) { 

     document.getElementById("b"+num).addEventListener('click', function() { 
      alert(num); 
     }); 

    })(i); 
} 

Solución # 2:

for (i=1; i<11; i++) { 
    document.getElementById("b"+i).addEventListener('click', (function(){ 
     var num = i; 
     return function() { 
      alert(num); 
     } 
    })()); 
}