JS FAQ: Why is the i that pops up when clicked always the last one_javascript tips

I saw many people asking this question in the front-end group, and someone asked this question again tonight, so I wrote an article to sort it out. First, take a look at the code. After clicking li, the index value corresponding to the current li will pop up. So many people wrote the following code.

var aLi = document.getElementsByTagName('li');
for(var i = 0; i < aLi.length; i++){
  aLi[i].onclick = function(){
    alert(i);
  }
}

But the result is not satisfactory. For the sake of simplicity, we agree that there are 2 li in the page. After clicking li, all the pop-ups are 2.
Let’s first analyze why the result is 1. We can simply divide the loop into two parts.

i = 0时,aLi[0].onclick = function(){alert(i)}
i = 1时,aLi[1].onclick = function(){alert(i)}
i = 2时，不满足条件跳出循环.

When executing the click function, there will be a scope chain. This scope chain is a list of objects. This group of objects defines the variables in the code scope. (If you want to know more about the content of the variable object, you can view the variable object.) When we alert(i), we will look for the variable i from the inside to the outside. At this time, there are two objects in the scope chain of this function. At this time, the loop has ended, and the value of i at this time is 2. So when you click on any li, the pop-up will be 2, not the index value we want. The point is that what pops up is variable i, variable i, variable i. Say important things three times.

So here comes the question, how do we solve this problem. What we need to do is to save the value of i in the internal scope every time we bind an event to aLi[i]. The solution is as follows.

var aLi = document.getElementsByTagName('li');
for (var i = 0; i < aLi.length; i++) {
 (function(i){
   aLi[i].onclick = function () {
      alert(i);
     };
 })(i)
}

This involves the concept of a block-level scope. Before ES6 came out, functions were the main means of creating block-level scopes. Here we put a layer of function outside aLi[i].onclick, using i as a parameter, and let's re-analyze the results.

 i = 0时,
  (function(i){
   aLi[0].onclick = function(){
     alert(i);
   }
  })(0)
  i = 1时,
  (function(i){
   aLi[1].onclick = function(){
     alert(i);
   }
  })(1)
  i = 2时，不满足条件跳出循环.

Due to the additional layer of self-executing function wrapping, when we click li, there will be three levels of scope. From the inside to the outside, they are: the variable object inside the click function, the variable object of the self-executing function and the outermost scope. The layer's window object. When searching for the second level, i was found. The i of the self-executing function is equal to the passed parameter value, and the value of i at that time is correspondingly saved, so the corresponding index value pops up.

Let me share with you a common js problem. Clicking on li can pop up the current li index and innerHTML function

Clicking on one of them will result in the following alert:

According to our usual thinking, the code should be written like this:

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

But unfortunately, the result is like this:

Why is the index always 4? This is caused by the lack of block-level scope in js. Here are three solutions

1. Use closures

<script type="text/javascript">
var myul = document.getElementsByTagName("ul")[0];
var list = myul.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();
</script>

2. Use the new feature let in ES6 to declare variables

Variables declared with let will have block-level scope, which obviously meets the requirements. However, it should be noted that you need to add 'use strict' (use strict mode) for it to take effect

<script type="text/javascript">
var myul = document.getElementsByTagName("ul")[0];
var list = myul.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();
</script>

3. Introduce jquery and use on or delegate for event binding (they all have the characteristics of event proxy)

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

<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>