javascript - 子 div onclick 事件 : onclick on dynamically added children divs doesn't work as intended

Question

我有一个父 div，我在循环中向其添加子 div。我尝试为每个 child 添加一个 onclick事件 - 这样子 div 在被点击时会改变它的颜色:

    var div;
    for (var i=1; i<=size*size; i++)  {
        div = document.createElement("div");
        div.id = i;
        div.style.width = 480/size + "px";
        div.style.height = 480/size + "px";

        div.onclick= function()  {
            div.style.backgroundColor="orange";
        }
        resultNode.appendChild(div);
    }

但是只有最后一个 div 改变了它的颜色，无论点击哪个子元素。我怀疑是因为 var div的最后一个值是最后一个 child ，但不应该是 onclick添加到其先前对象中的对象一旦添加到 resultNode 中，就会保留在这些对象中？

我也试过添加这个循环:

    var children=resultNode.children;
    for (var i=0; i<children.length; i++)  {
        children.item(i).onclick = function()  {
            children.item(i).style.backgroundColor="blue";
            alert(i);
        }
    }

但是，它仅适用于索引根据 child 数量而变化的单个 child 。如果只有 25 (它在代码中的值 size*size)children，索引为 6 的 child 会变色。如果有100 children ，11如果有400， child 会变色 children ，21第一个 child 会变色。这始终是第二行的第二个 div(有 size*size div 与 size 行和 size 列形成正方形，这意味着着色的 div 位于 size +1 位置):

我不明白这种行为。为什么会发生这种情况，我应该如何编辑代码以获得预期的结果(点击时任何子 div 都会改变其颜色)？

Answer 1

div 没有引用您在 click 处理程序中期望的内容，请参阅 JavaScript closure inside loops – simple practical example .您可以使用 event.target 来引用调度事件的元素

for (let i = 1; i <= 5; i++) {
  let div = document.createElement("div");
  div.id = i;
  div.textContent = i;
  div.onclick = e => e.target.style.backgroundColor = "orange";
  resultNode.appendChild(div);
}

<div id="resultNode"></div>

或者

for (let i = 1; i <= 5; i++) {
  let div = document.createElement("div");
  ((div) => {
    div.id = i;
    div.textContent = i;
    div.onclick = e => div.style.backgroundColor = "orange";
    resultNode.appendChild(div);
  })(div)
}

<div id="resultNode"></div>