For example, a list of indeterminate lengths that changes the background when the mouse passes through a bar.
<textarea id="runcode61344"><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title>untitled page</title> </p ead> <body> <ul id= "list" > <li> 1th record </li> <li> 2nd record </li> <li> 3rd record </ li> <li> 4th record </li> <li> 5th record </li> <li> 6th record </li> </ul> <script type= "Text/javascript" > var list_obj = document.getElementById ("list"). getElementsByTagName ("Li"); Gets the object array for all Li below the list for (var i = 0; I <= list_obj.length i++) {list_obj[i].onmousemove = function () {This.style. BackgroundColor = "#cdcdcd"; } list_obj[i].onmouseout = function () {This.style.backgroundColor = "#FFFFFF"; }} </script> </body> </ptml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
This example loops through a set of object binding event handler functions.
However, if we add some demand on this basis. For example, when you click on a record, what's the first few records?
Ken, you'll take it for granted:
<textarea id="runcode14037"><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title>untitled page</title> </p ead> <body> <ul id= "list" > <li> 1th record </li> <li> 2nd record </li> <li> 3rd record </ li> <li> 4th record </li> <li> 5th record </li> <li> 6th record </li> </ul> <script type= "Text/javascript" > var list_obj = document.getElementById ("list"). getElementsByTagName ("Li"); Gets the object array for all Li below the list for (var i = 0; I <= list_obj.length i++) {list_obj[i].onmousemove = function () {This.style. BackgroundColor = "#cdcdcd"; } list_obj[i].onmouseout = function () {This.style.backgroundColor = "#FFFFFF"; List_obj[i].onclick = function () {alert ("This is the first" + i + "record"); }} </script> </body> </ptml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Test it out and you'll find out that alert is all: This is the 6th record.
In fact, here the For Loop has cycled through the entire list and executed the i++, so here I turned 6,
Is there any good way to solve the problem?
That's closure, and personally think that closure is one of the most elusive places in JS,
Look at what a closure is:
A closure is an inner function that refers to a variable that exists within a function that surrounds him, even though the execution of the outer function is terminated.
In this example we can do this:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title>untitled page</title> </p ead> <body> <ul id= "list" > <li> 1th record </li> <li> 2nd record </li> <li> 3rd record </ li> <li> 4th record </li> <li> 5th record </li> <li> 6th record </li> </ul> <script type= "Text/javascript" > Function tt (NOB) {this.clickfunc = function () {alert ("This is the first" + (NOB + 1) + "record"); } var list_obj = document.getElementById ("list"). getElementsByTagName ("Li"); Gets the object array for all Li below the list for (var i = 0; I <= list_obj.length i++) {list_obj[i].onmousemove = function () {This.style. BackgroundColor = "#cdcdcd"; } list_obj[i].onmouseout = function () {This.style.backgroundColor = "#FFFFFF"; var col = new TT (i); List_obj[i].onclick = Col.clickfunc; } </script> </boDy> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
PS: Closure is difficult, very complicated!
