如何用Javascript中的循环生成事件处理程序？

例如，我有10个由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> 

我需要通过循环分配onclick事件给他们每个人：

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

这不起作用，它只分配onclick到最后一个标签，并警告“11”。 我怎样才能使这个工作？ 我不喜欢使用jQuery。

Answer 1

所有的处理程序都共享相同的variables。

你需要把每个处理程序放到一个单独的函数中，以i作为参数，以便每个函数获取自己的variables：

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

Answer 2

closures是你在找什么：

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

Answer 3

在这个问题上有两种使用闭包的方法。 这个想法是为事件处理程序使用的每个迭代创build一个带有“i”variables快照的范围。

解决scheme＃1（正如凯文提到的）：

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

解决scheme2：

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