JS for循环问题

Question

被最近发现的一个问题困扰着，作为一名js小白最近自己在写一些demo经常用到for循环来遍历触发事件，例如：

var Lis=document.getElementsByTagName('li');
for(i=0;i<Lis.length;i++){
    Lis[i].onClick=function(){...}
}

平时一直都这样用这没怎么深究，最近在找一个bug时却钻进了牛角尖...就用上面的代码作例，假设这是三个li，点击每个li都可以触发function，可是这个循环不是只循环3次吗，它是怎么保证多次点击不同的li都能被识别到的？问题解释得不太好希望明白我意思的朋友可以指点指点...

Answer 1

你代码中的循环3次，是分别为三个li绑定了点击事件。任意一个li被绑定点击事件后，可以无限地点击它并触发点击事件对应的函数。其效果同下代码：

var Lis=document.getElementsByTagName('li');
Lis[0].onClick=function(){/* 第一个li对应的回调函数代码 */}
Lis[1].onClick=function(){/* 第二个li对应的回调函数代码 */}
Lis[2].onClick=function(){/* 第三个li对应的回调函数代码 */}

绑定完成后，你不管点击多少次li都会执行相同次数的对应回调函数（比如点击 n 次 第一个li，就会执行 n 次 function(){/* 第一个li对应的回调函数内容 */}中的代码）。
当然，你点击第二个 li 它将执行的是这段代码function(){/* 第二个li对应的回调函数代码 */}，所以每个 li 的点击是互不相关的。

Answer 2

要用事件代理啊。有一万个li你注册一万个事件吗？

Answer 3

只循环了三次相当于你给三个房子安了窗户。
之后你开关不管哪个房子的窗户都跟安装的次数没关系。

Answer 4

已经绑定了就可以一直用

Answer 5

onClick只是DOM对象的一个属性，这个属性指向一个函数。
既然你把onClick已经在循环中赋值过一次了，为什么会产生回调（事件触发以后）之后函数就没了或者onClick属性没了的错觉呢？

Answer 6

只是在循环中给不同的li绑定click事件，循环几次跟你要绑定click事件的元素的个数有关，跟你点击的次数没关系。事件一旦绑定上，触发事件的是你的<<点击>>操作，也就是说只要事件没有从元素上unbind，它就在一直监听你的点击操作。这种问题解释起来真是费劲啊，希望你能明白。

如你的代码，不同的li执行的funciton是一样的就没必要使用循环，可以试试下面的：

// 这里使用了jquery
$(document.getElementsByTagName('div')).click(function(){
        console.info(this);
    });

Answer 7

你可以理解为：for是帮你找到所有li的取值，而不是决定当前你所取的值

Answer 8

感谢大家的回答，真是钻到牛角尖里去了，小弟已经明白了