JS Closed Package Demo

Let's take a look at an example of JavaScript using loop-bound events:

For example: A list of indeterminate lengths that changes the background when the mouse passes over a certain bar.

﹤! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "﹥
﹤html xmlns= "http://www.w3.org/1999/xhtml" ﹥
﹤head﹥
﹤title﹥untitled Page﹤/title﹥
﹤/head﹥
﹤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 an array of all the Li objects 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﹥
﹤/html﹥

This example loops over a set of object-bound event handlers.

However, if we add some demand on this basis. For example, when clicking on a record, which is the first record?

Maybe you'll take it for granted:

﹤! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "﹥
﹤html xmlns= "http://www.w3.org/1999/xhtml" ﹥
﹤head﹥
﹤title﹥untitled Page﹤/title﹥
﹤/head﹥
﹤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 an array of all the Li objects 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﹥
﹤/html﹥

Test it and you'll find out that the alert is all: This is the 6th record.

Actually here the FOR Loop has looped the entire list and executed the i++, so here I becomes 6,

Is there any good way to solve this problem?

That is the closure, the individual thinks that the closure is one of the most elusive places in JS,

See what closures are:

A closure is a function of the inner layer that can reference a variable within a function that encloses him, even if the execution of the outer function has been terminated.

Can be consulted: http://www.css88.com/article.asp?id=469

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 "﹥
﹤html xmlns= "http://www.w3.org/1999/xhtml" ﹥
﹤head﹥
﹤title﹥untitled Page﹤/title﹥
﹤/head﹥
﹤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 an array of all the Li objects 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﹥
﹤/html﹥

Excerpt from: http://www.cnblogs.com/angells/archive/2009/11/19/1606439.html