首頁猿問 JS for循環(huán)問題

JS for循環(huán)問題

JavaScript

慕村225694 2018-08-10 10:10:19

被最近發(fā)現(xiàn)的一個問題困擾著，作為一名js小白最近自己在寫一些demo經(jīng)常用到for循環(huán)來遍歷觸發(fā)事件，例如：var Lis=document.getElementsByTagName('li');for(i=0;i<Lis.length;i++){ Lis[i].onClick=function(){...} }平時一直都這樣用這沒怎么深究，最近在找一個bug時卻鉆進了牛角尖...就用上面的代碼作例，假設這是三個li，點擊每個li都可以觸發(fā)function，可是這個循環(huán)不是只循環(huán)3次嗎，它是怎么保證多次點擊不同的li都能被識別到的？問題解釋得不太好希望明白我意思的朋友可以指點指點...

查看完整描述

1 回答

米琪卡哇伊

TA貢獻1998條經(jīng)驗獲得超6個贊

你代碼中的循環(huán)3次，是分別為三個li綁定了點擊事件。任意一個li被綁定點擊事件后，可以無限地點擊它并觸發(fā)點擊事件對應的函數(shù)。其效果同下代碼：

var Lis=document.getElementsByTagName('li');
Lis[0].onClick=function(){/* 第一個li對應的回調函數(shù)代碼 */}
Lis[1].onClick=function(){/* 第二個li對應的回調函數(shù)代碼 */}
Lis[2].onClick=function(){/* 第三個li對應的回調函數(shù)代碼 */}

綁定完成后，你不管點擊多少次li都會執(zhí)行相同次數(shù)的對應回調函數(shù)（比如點擊 n 次第一個li，就會執(zhí)行 n 次 function(){/* 第一個li對應的回調函數(shù)內容 */}中的代碼）。
當然，你點擊第二個 li 它將執(zhí)行的是這段代碼function(){/* 第二個li對應的回調函數(shù)代碼 */}，所以每個 li 的點擊是互不相關的。