| SitePoint Sponsor |
Originally Posted by dek
HTML Code:<html> <head> <script type="text/javascript"> function addEventHandlers() { div_list = document.getElementsByTagName('div'); for ( var i = 0 ; i < div_list.length ; i++ ) { div_list[i].onclick = function() { alert(i); }; } } </script> </head> <body> <div>foobar</div> <div>barfoo</div> <script type="text/javascript"> addEventHandlers(); </script> </body> </html>
... and off the top of my head, each of those divs will alert you with the latest value of i (2) when you click on them. That's a closure. Still don't see your point...
Only dead fish go with the flow
How is that a closure? If it was true closure than the first would produce 0 (the initial loop counter value) and the second would produce 1 as:
does. Maybe I'm not expressing the correct problem but.. I consider that an issue.Code:<html> <head> <script type="text/javascript"> function addEventHandlers() { div_list = document.getElementsByTagName('div'); for ( var i = 0 ; i < div_list.length ; i++ ) { addOnClick(div_list[i],i); } } function addOnClick(element,counter) { div_list[i].onclick = function() { alert(i); }; } </script> </head> <body> <div>foobar</div> <div>barfoo</div> <script type="text/javascript"> addEventHandlers(); </script> </body> </html>
No, I never said it was broken, it was a testcase to show that IE6 leaks badly with closures and that the leak is gone in IE 7 beta 2
Chris. I think you meant to type the following:
Yes, that is another closure. It will achieve the result you want, because this time you're passing one instance of i into a different scope.Code:function addOnClick(element,counter) { element.onclick = function() { alert(counter); }; }
The mechanism, however is exactly the same. If you change it to:
You should see what I mean.Code:function addOnClick(element,counter) { element.onclick = function() { alert(counter); }; counter = 200; }
Only dead fish go with the flow
Posting Permissions
Bookmarks