如何在Javascript中使用循环生成事件处理程序?
例如,我有10个由AJAX响应生成的标记:如何在Javascript中使用循环生成事件处理程序?,javascript,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 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);
}
}
for(i=1;i所有处理程序都共享相同的i
变量
您需要将每个处理程序放入一个单独的函数中,该函数将i
作为参数,以便每个处理程序都有自己的变量:
function handleElement(i) {
document.getElementById("b"+i).onclick=function() {
alert(i);
};
}
for(i=1; i<11; i++)
handleElement(i);
函数句柄元素(一){
document.getElementById(“b”+i).onclick=function(){
警报(一);
};
}
对于(i=1;i而言,您需要的是一个闭包:
for(i=1; i<11; i++) {
(function(i) {
document.getElementById("b"+i).onclick=function() {
alert(i);
};
})(i);
}
for(i=1;i在这个问题上有两种使用闭包的方法。其思想是为事件处理程序使用的每个迭代创建一个包含“i”变量快照的范围
解决方案#1(正如Kevin所提到的):
for(i=1;i您应该调用attachEvent
/addEventListener
(尽管它们不会解决您的问题)@SLaks为什么attachEvent
/addEventListener
比元素更合适。onclick
?@micahenning:允许您有多个处理程序。@SLaks啊,很好。谢谢。我想说的是,Caballero有一个闭包,他们不需要闭包,他们需要一个闭包拦截器来强制立即计算I代码>。这就是你的自执行函数所做的。闭包/不闭包…我不在乎!这个匿名/自调用解决方案很漂亮:)我会勾选这个。比拥有单独的函数要优雅得多。test.html:11未捕获类型错误:无法将属性“onclick”设置为null
for(i=1; i<11; i++) {
(function(num) {
document.getElementById("b"+num).addEventListener('click', function() {
alert(num);
});
})(i);
}
for (i=1; i<11; i++) {
document.getElementById("b"+i).addEventListener('click', (function(){
var num = i;
return function() {
alert(num);
}
})());
}