将参数传递给事件函数

Question

看看这个简单的样本

<input type="button" value="btn1" id="btn1" />
<input type="button" value="btn2" id="btn2" />
<input type="button" value="btn3" id="btn3" />
<input type="button" value="btn4" id="btn4" />
<input type="button" value="btn5" id="btn5" />

<script>
    for (i=1; i<5; ++i){
        var btn = document.getElementById('btn' + i);
        btn.onmouseover = function(){
            alert(i);
        }
    }
</script>

我希望当我在1上移动鼠标时，它会发出警告btn1，但遗憾的是它会警告5！

如何将变量从循环传递给函数？

Answer 1

这是闭环问题。所有的鼠标悬停都在同一个变量上，因为JavaScript只有函数范围。您可以通过创建新函数来修复它，从而创建一个新范围。

for (i=1; i<5; ++i){
    (function(i)
    {
        var btn = document.getElementById('btn' + i);
        btn.onmouseover = function(){
            alert(i);
        }
    })(i);
}