JavaScript closure problem loop

broken.html

<!--
    console.log always says '10'
-->
<style>
    #links {
        padding:1em;
    }

    a {
        text-decoration:none;
        padding:.5em;
    }
</style>

<div id="links"> </div>

<script>
    var arr = [1,2,3,4,5,6,7,8,9,10],
        $links = document.getElementById('links');

    for(i = 0; i < arr.length; i++) {
        var a = document.createElement('a');
        a.id = 'link-' + i;
        a.href = '#';
        a.innerHTML = i;
        $links.appendChild(a);
        a.addEventListener('click', function(){
            console.log(i);
        })
    }
</script>

good.html

<!--
    console.log always says the correct number
-->
<style>
    #links {
        padding:1em;
    }

    a {
        text-decoration:none;
        padding:.5em;
    }
</style>

<div id="links"> </div>

<script>
    var arr = [1,2,3,4,5,6,7,8,9,10],
        $links = document.getElementById('links');

    var listen = function(el, i) {
        el.addEventListener("click", function(){
            console.log(i);
        })
    };

    for(i = 0; i < arr.length; i++) {
        var a = document.createElement('a');
        a.id = 'link-' + i;
        a.href = '#';
        a.innerHTML = i;
        $links.appendChild(a);
        listen(a, i);
    }
</script>