循环中添加addEventListener，为什么我需要创建一个返回函数的函数？

Question

我想做一个非常简单的事情：在一个基本上引用循环索引的代码循环上添加一个监听器。

经过一番搜索后，我想出了一个解决方案，但我不明白为什么其他版本无效。

这是javascript代码（您可以从任何空的html页面加载）：

var myarray = ["House", "Car", "Fruit"];
for(var i=0; i<myarray.length; i++)
{
    // Code that create the div
    var mydiv = document.createElement("div");
    mydiv.innerHTML = myarray[i];
    document.body.appendChild(mydiv);

    // Add listener
    // Version 1: create a new variable that points to i
    var tmp_i = i;
    mydiv.addEventListener("click", function(){alert("Version 1: You clicked on div nb " + tmp_i)}, false);
    // ==> Problem: always output the maximum value of i !!!

    // Version 2: create a function that outputs a function (a bit crazy)
    var my_function_creator = function(arg_i) {
        return function(){alert("Version 2: You clicked on div nb " + arg_i)};
    };
    mydiv.addEventListener("click", my_function_creator(i), false);
    // This works !
}

所以这是我的问题：为什么第一个版本不起作用，而第二个版本有效？对我来说，tmp_i是i的新副本，因此不应该修改......第二种方法是最好的方法吗？

谢谢！