javascript - 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都能被识别到的？问题解释得不太好希望明白我意思的朋友可以指点指点...

解决方案

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

这篇关于javascript - JS for循环问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！