Question

我想将鼠标事件添加到类.piece，即使在加载DOM之后创建了div。

这是我的实际循环：

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循环中，并将鼠标事件附加到它们上？

感谢。

Answer 1

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

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

Answer 2

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

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

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

Answer 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);

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

3 个答案: