鍍金池/ 問答/HTML/ (筆試題)下面程序有什么問題,怎么修改？

(筆試題)下面程序有什么問題,怎么修改？

<body>
  <ul>
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
  </ul>
  
  <script>
      var lis = document.querySelectorAll("ul li");
      for(var i = 0,len = lis.length; i < len; i++){
        lis[i].addEventListener('click',function(){
           console.log(i);
        },false);
      }
  </script>
</body>
回答
編輯回答
懶豬

js點擊標簽實現(xiàn)變色，思路有點問題求指正！，
這類問題比較經(jīng)典，我在這個問題下回答了四種方案?？晒﹨⒖?。

2017年7月14日 06:45
編輯回答
神曲

js的塊級作用域問題，在你點擊時，for已經(jīng)完成循環(huán)，此時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.加個閉包

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

3.給每個 lis[i]一個自定義屬性把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);
      }
2017年7月31日 14:03
編輯回答
冷溫柔

有2個問題。

  • 第一個問題就是性能不好。假設以后里面的li有1000個，你每一個都綁定一個事件，會占用大量內(nèi)存。推薦使用事件委托。代碼示例如下：
var ul = document.querySelector('ul');
ul.addEventListener('click',function(e){
    alert(e.target.innerText);
 });

如果面試官非要點擊彈出li的相對順序的話，改成下面的代碼即可

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);
});
  • 第二個問題就是點擊所有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);
}
2017年12月6日 00:58