经典js问题

    var list = document.getElementsByTagName("li");      function foo(){          for(var i = 0, len = list.length; i < len; i++){              list[i].onclick = function(){                  alert(i + "----" + this.innerHTML);              }          }      }      foo(); 

我们会发现运行结果是弹出 list.length,这是因为没有块级作用域造成的，解决办法由几个：

1.使用闭包

var list = document.getElementsByTagName("li");  function foo(){      for(var i = 0, len = list.length; i < len; i++){          var that = list[i];          list[i].onclick = (function(k){              var info = that.innerHTML;              return function(){                  alert(k + "----" + info);              };          })(i);      }  }  foo(); 

2.使用闭包

var list = document.getElementsByTagName(“li”);

function foo(){‘use strict’
for(let i = 0, len = list.length; i < len; i++){
list[i].onclick = function(){
alert(i + “—-” + this.innerHTML);
}
}
}
foo();

3.事件委托

var myul = document.querySelector('ul');  var list = document.querySelectorAll('ul li');  myul.addEventListener('click', function(ev){      var ev = ev || window.event;      var target = ev.target || ev.srcElemnt;      for(var i = 0, len = list.length; i < len; i++){          if(list[i] == target){              alert(i + "----" + target.innerHTML);          }      }  });  

4.使用jquery的delegate和on进行事件绑定

<script type="text/javascript">  $("ul").delegate("li", "click", function(){      var index = $(this).index();          var info = $(this).html();      alert(index + "----" + info);  });  </script>  <script type="text/javascript">  $("ul").on("click", "li", function(){      var index = $(this).index();          var info = $(this).html();      alert(index + "----" + info);  });  </script>