javascript - 事件中的变量

Question

我得到了这个代码:

<script>window.onload = function () {
    var container, i;

    for (i = 0; i < 10; i ++) {
        container = document.createElement ("div");
            container.innerHTML = i;

            container.style.border = "1px solid black";
            container.style.padding = "10px";

            container.onclick = function () {
                alert (i);
            }

        document.body.appendChild (container);
    }
}</script>

只是想知道为什么当我点击元素时我得到了错误的数字:(

谢谢

Answer 1

这是匿名函数的经典作用域问题。

函数中的变量 i 对于您添加的每个事件处理程序都是相同的 - 因此它们都会发出相同的警报值。

您想为每个变量创建一个新范围:类似于:

function createAlertFunction(i) {
    return function() {
        alert(i);
    }
}

//...

container.onclick = createAlertFunction(i);