Let's take a look at an example of using cyclic binding events in Javascript:
For example, a list with an uncertain length changes the background when the mouse passes through a certain line.
| Reference content is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
In this example, an event handler is bound to a group of objects in a loop.
However, if we add some requirements on this basis. For example, when you click a record, which of the following records is displayed?
Could you take it for granted:
| Reference content is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Test it and you will find that all alert records are: This is a 6th record.
In fact, here the for loop has already loops the entire list and executed I ++, so here I is changed to 6,
Is there any good way to solve this problem?
That is the closure. I personally think that closure is one of the most elusive aspects of js,
See what is a closure:
A closure refers to a function in the inner layer that can reference the variables in the function that exist and enclose it, even if the execution of the function in the outer layer has been terminated.
In this example, we can do this:
| Reference content is as follows: <! 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> 1st records </li> <Li> 2nd records </li> <Li> 3rd records </li> <Li> 4th records </li> <Li> 5th records </li> <Li> 6th records </li> </Ul> <Script type = "text/javascript"> Function tt (nob ){ This. clickFunc = function (){ Alert ("this is the" + (nob + 1) + "record "); } } Var list_obj = document. getElementById ("list"). getElementsByTagName ("li"); // obtain the array of all li objects in 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> |
PS: the closure is very difficult and complicated!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
