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.
<! 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">
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 ";
}
}
</Script>
</Body>
</Html>
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?
You may 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> 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">
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 ";
}
List_obj [I]. onclick = function (){
Alert ("this is the" + I + "record ");
}
}
</Script>
</Body>
</Html>
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.
Can check: 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> 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>
- Implement a pseudo-hash table in Javascript
- Four rules for JavaScript function calls
- Replace methods and regular expressions in Javascript