js點(diǎn)擊標(biāo)簽實(shí)現(xiàn)變色，思路有點(diǎn)問(wèn)題求指正！，
這類(lèi)問(wèn)題比較經(jīng)典，我在這個(gè)問(wèn)題下回答了四種方案。可供參考。

js的塊級(jí)作用域問(wèn)題，在你點(diǎn)擊時(shí)，for已經(jīng)完成循環(huán)，此時(shí)i為3
1.var 改成let

 for(let i = 0,len = lis.length; i < len; i++){
        lis[i].addEventListener('click',function(){
           console.log(i);
        },false);
      }

2.加個(gè)閉包

   for(var i = 0,len = lis.length; i < len; i++){
          (function(i){
            lis[i].addEventListener('click',function(){
           console.log(i);
        },false);
          })(i)   
      }

3.給每個(gè) lis[i]一個(gè)自定義屬性把i暫存起來(lái)

  for(var i = 0,len = lis.length; i < len; i++){
          lis[i].index = i;
        lis[i].addEventListener('click',function(){
           console.log(this.index);
        },false);
      }

有2個(gè)問(wèn)題。

• 第一個(gè)問(wèn)題就是性能不好。假設(shè)以后里面的li有1000個(gè)，你每一個(gè)都綁定一個(gè)事件，會(huì)占用大量?jī)?nèi)存。推薦使用事件委托。代碼示例如下：

var ul = document.querySelector('ul');
ul.addEventListener('click',function(e){
    alert(e.target.innerText);
 });

如果面試官非要點(diǎn)擊彈出li的相對(duì)順序的話，改成下面的代碼即可

var lis = document.querySelectorAll("ul li");
var ul = document.querySelector('ul');
for(let i = 0,len = lis.length; i < len; i++){
  lis[i].index  = i
}
ul.addEventListener('click',e => {
    alert(e.target.index);
});

• 第二個(gè)問(wèn)題就是點(diǎn)擊所有l(wèi)i，輸出結(jié)果都是3?？梢詤⒖寄奥贩哺璧拇鸢?，可以把代碼改成es6方便裝逼

// 使用es6的let和箭頭函數(shù)
for(let i = 0; i < lis.length; i++){
   lis[i].addEventListener('click',() => {
     alert(i);
   },false);
}