0

.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();

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

.cloneNode()我用and添加那些新的 div .appendChild()，如下所示：

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 都有 class .piece。

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

谢谢。

4

3 回答 3

2

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

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

于 2012-10-18T00:27:42.260 回答
2

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

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

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

于 2012-10-18T00:27:52.313 回答
1

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

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

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);
于 2012-10-18T00:36:13.537 回答