Article From:https://www.cnblogs.com/baoshuyan66/p/9971251.html

Let’s first look at the results of popping up the index value of Li when clicking on different Li tags.

HTML:

<ul>
<li>0</li>
<li>2</li>
<li>2</li>
<li>3</li>
</ul>

JS:

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

The result is unsatisfactory. When we click li, we return 4. Let’s analyze the code.

When I = 0, aLi [0]. onclick = function () {alert (i)}

When I = 1, aLi [1]. onclick = function () {alert (i)}

When I = 2, aLi [1]. onclick = function () {alert (i)}

When I = 3, aLi [1]. onclick = function () {alert (i)}

When I = 4, jump out of the loop without satisfying the condition

When a click function is executed, there is a scope chain, which is a list of objects that define variables in the code scope. When we alert (i), we look for variables from the inside out.I. At this point, there are four objects in the scope chain of this function, and the loop is over. I has a value of 4 at this time. So click on any Li and it will pop up 4, not the index value we want.

So here’s the problem. What we need to do to solve this problem is to store the value of I in the internal scope every time we bind an event to aLi [i].

Method 1: Use the form of closures

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 use a layer of function outside aLi [i]. onclick, take I as a parameter, and then re-analyze the results.

i = 0At that time,
(function(i){
aLi[0].onclick = function(){
alert(i);
}
})(0)
i = 1At that time,
(function(i){
aLi[1].onclick = function(){
alert(i);
}
})(1)
(function(i){
aLi[2].onclick = function(){
alert(i);
}
})(2)
(function(i){
aLi[3].onclick = function(){
alert(i);
}
})(4)
i = 4When the condition is not satisfied, jump out of the cycle.

There are three levels of scope when we click Li because there is one more layer of wrapping of self-executing function. From inside to outside, there are variables in click function, variables in self-executing function and windows object in outer layer. When we find the second level, we find the i, self-executing function.I equals the value of the incoming parameter, and the corresponding value of I is saved, so the corresponding index value is popped up.

Method 2: Use the new feature let in ES6 to declare variables

for(let i=0;i<aLi.length;i++){
aLi[i].onclick = function(){
alert(i)
}
}

Method 3: Introduce jQuery and use on or delegate to bind events (they all have the characteristics of event proxy)

$(“ul”).on(“click”, “li”, function(){
var index = $(this).index();
var info = $(this).html();
alert(index + “—-” + info);
});

$(“ul”).delegate( “li”, “click”,function(){
var index = $(this).index(); //Index location
var info = $(this).html();
alert(index + “—-” + info);
});

 

Leave a Reply

Your email address will not be published. Required fields are marked *