被最近发现的一个问题困扰着,作为一名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你注册一万个事件吗?