Sample code for Javascript loop binding events_javascript tips

For example: a list of indefinite length, the background changes when the mouse passes over a certain item.

<title>Untitled Page</title> <ul id="list"> <li>Record 1</li> <li>Record 2</li> <li>Record 3</li> <li>Record 4</li> <li>Record 5</li> <li>Record 6</li> </ul>
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]

This example loops into a group Object binding event handler function.
However, if we add some requirements on this basis. For example, when you click on a certain record, what record is this?
Maybe you will write this as a matter of course:

<title> </title>Untitled Page <ul id="list"> <li> </li>Record 1<li> </li>Record 2<li> </li>Record 3<li> </li>Record 4<li> </li>Record 5<li> </li>Record 6</ul>
[Ctrl A Select all Note:

If you need to introduce external Js, you need to refresh to execute
]

Test it and you will find alert What comes out is: This is the 6th record
In fact, the for loop here has cycled through the entire list and executed i, so i here becomes 6.
Is there any good way to solve this problem? ?
That’s closure. Personally, I think closure is one of the most elusive things in js.
Look at what closure is:
Closure means that inner functions can reference existing and variables within the enclosing function, even if execution of the outer function has terminated.

In this example we can do this: <title> </title> Untitled Page <ul id="list"> <li> </li> <li>Record 1</li> <li>Record 2</li> <li>Record 3</li> <li>Record 4</li> <li>Record 5</li> </ul>Record 6

[Ctrl A Select all Note:
If you need to introduce external Js, you need to refresh it to execute
]PS: Closure is difficult , very complicated!