首页 > JS for循环问题

JS for循环问题

被最近发现的一个问题困扰着,作为一名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都能被识别到的?问题解释得不太好希望明白我意思的朋友可以指点指点...


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


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

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

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

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


你代码中的循环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 的点击是互不相关的。


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


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


已经绑定了就可以一直用


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

【热门文章】
【热门文章】