在 javascript 中使用新的 dom 元素更新 for 循环答案

【问题标题】：updating a for loop with new dom elements in javascript在 javascript 中使用新的 dom 元素更新 for 循环
【发布时间】：2012-10-18 00:22:43
【问题描述】：

我想在 .piece 类上添加鼠标事件，即使 div 是在加载 DOM 之后创建的。

这是我的实际循环：

var piece = document.getElementsByClassName('piece');

function theLoop() {
  for(var i=0; i<piece.length; i++) {
    piece[i].addEventListener("mousemove", function(event) {
      //do stuff
    }
  }
}

theLoop();

它工作正常，但如果我在加载 DOM 后添加带有 .piece 类的新 div，循环会忽略它们。

我用.cloneNode() 和.appendChild() 添加这些新的div，像这样：

function createPiece(symbol, name) {
  var clone = document.getElementById(symbol).cloneNode(true);
  clone.setAttribute('id',symbol+'-'+name);
  document.getElementById(name).appendChild(clone);
}

createPiece(symbol, name);

所有原始克隆的 div 都有 .piece 类。

如何将这些新的 div 添加到我的 for 循环中，并将鼠标事件附加到它们？

谢谢。

【问题讨论】：

“循环忽略它们”是什么意思？你什么时候运行那个循环？您确定新元素已成功添加吗？

标签： javascript loops for-loop mouseevent appendchild

【解决方案1】：

如果您的循环在页面加载时运行，则无法让它考虑之后动态添加到 DOM 的元素。通常，event delegation 是一个解决方案，但对于 mousemove 事件（因为它经常触发）不是一个好的解决方案。

您可以做的是创建一个函数，将事件处理程序添加到传递的元素。然后，您可以从当前循环中调用该函数，并在将每个新元素添加到 DOM 后再次调用它。

【讨论】：

【解决方案2】：

将 mousemove 事件处理程序放在所有片段的公共父级上，然后检查事件数据结构中的 e.target 以查看事件实际发生在哪个片段上。

这称为委托事件处理，允许您在静态父级上仅安装一个事件处理程序，该事件处理程序将为您提供来自所有子级的事件，甚至是稍后动态添加的子级。

唯一的其他选择是在稍后将其添加到页面时在每个特定部分上安装事件处理程序。您需要从将元素添加到页面的实际代码中触发此操作，因为没有得到良好支持的跨浏览器方法来监视 DOM 修改。如果你这样做，你需要让你的事件处理函数成为一个命名函数（而不是你现在使用的匿名函数），这样你就可以在多个地方使用同一个函数。

【讨论】：

【解决方案3】：

对于新创建的元素，您不需要循环。您也不需要事件委托（尽管它可能很有用）。

只需将处理程序设为命名函数，并在克隆时绑定。

var piece = document.getElementsByClassName('piece');

function pieceHandler(event) {
  //do stuff
}

function theLoop() {
  for(var i=0; i<piece.length; i++) {
    piece[i].addEventListener("mousemove", pieceHandler, false)
  }
}

theLoop();

function createPiece(symbol, name) {
    var clone = document.getElementById(symbol).cloneNode(true);
    clone.addEventListener("mousemove", pieceHandler, false); // assign handler
    clone.setAttribute('id',symbol+'-'+name);
    document.getElementById(name).appendChild(clone);
}

createPiece(symbol, name);

【讨论】：