Closure

<html>
    <head>
        <title>Test</title>
        <script type="text/javascript">
        function test() {
            var ol = document.getElementById('test');
            var lis = ol.getElementsByTagName('li');
            for (var i = 0; i < lis.length; i++) {
                lis[i].onmouseover = function() { lis[i].innerHTML = i.toString(); };
            }
        }

        function test2() {
            var ol = document.getElementById('test2');
            var lis = ol.getElementsByTagName('li');
            for (var i = 0; i < lis.length; i++) {
                lis[i].onmouseover = closure(lis[i], i.toString());
            }
        }

        function closure(elem, html) {
            return function() { elem.innerHTML = html; };
        }

        function test3() {
            var ol = document.getElementById('test3');
            var lis = ol.getElementsByTagName('li');
            for (var i = 0; i < lis.length; i++) {
                (function () {
                var j = i;
                var elem = lis[i];
                elem.onmouseover = function () { elem.innerHTML = j.toString(); };
                })();
            }
        }
        </script>
    </head>
    <body onload="test(); test2(); test3();">
        <h1>Test</h1>
        <ol id="test">
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ol>
        <ol id="test2">
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ol>
        <ol id="test3">
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ol>
    </body>
</html