JS Loop Binding Event

In JS, it is a common problem to use loops to bind events to elements of a pair of element queues.

People who usually enter the wrong way will write code like this: (assuming that the element queue is O, jquery is used by default)

Error method

var o =$ ('. Blockhead '); for (var i=0; i<o.length; i++) {O[i].onclick = function () {function (i) {    alert (i)}}}

Of course, in this case, you will find that each element clicked to run, the I value displayed is o.length-1;

Because the function of JS is triggered at the time of the call, the I value of the binding event is not passed into the execution function.

As an asynchronous listener event, when the Click event occurs, the loop is over, the I value is [o.length-1], and the parameter that triggers the event is naturally the same maximum value, rather than expecting different elements to pass different values.

Solution idea: The I value obtained in the process of binding event is saved in the executing function domain, and the corresponding result is obtained naturally when called.

Method One: Use the closure function to store the I value

var o = $ ('. Blockhead '); for (var i=0; i<o.length; i++) {O[i].onclick = (function Closure (ii) {               //var II;               We save II in this Scopereturn function () {alert (ii);}}) (i);}

As above, Colsure is a closure function (Closure function name can be omitted, as an anonymous closure function), declared immediately after execution, passed the I value, so in its function field saved I value (arguments parameter list);

The return result of the function is the event handler, whose parameter II is the second value stored in the Colsure, which is the I value passed in the loop.

PS: Method One is a very common solution to the problem, and in the process of finding a solution, I found another way to do it, as follows.

Method Two: Write the event-bound code in a peripheral function

var o = $ ('. Blockhead '), for (var i=0; i<o.length; i++) {attach (I,o[i]), function Attach (ii,o) {O.onclick = function () { Alert (ii);};} or execute the var o = $ ('. Blockhead ') immediately after declaring the function, for (var i=0; i<o.length; i++) {(function attach (ii,o) {O.onclick = function () { Alert (ii);};}) (I,o[i]);}

In the same way, in the Attach function domain, the value of the OnClick Event II is the I that is obtained by executing the loop, and the result after the external I executes the loop is that what has not been related to the interior.

Slightly more troublesome than the method, the argument needs to pass a reference to an element more than one.