Javascript：addEventListener 不在 for 循环中工作

Question

情况：我从 API 获取 JSON 数组。 “div”来自我代码前面的 getElementByID。

问题：addEventListener 只附加到我列表中的最后一个元素。

    for(var i = 0; i < JSONarray.response.artists.length; i++){
      var artistName = JSONarray.response.artists[i];
      div.innerHTML += "<h4 id=\"artist" + i + "\" accessKey=\"" + artistName.id + "\">Artist Name: " +  artistName.name + "</h4>";
      document.getElementById("artist" + i).addEventListener("click", moreInfo, false);
    }

奇怪的事情：如果我将 addEventListener 放在它自己的 for 循环中（使用完全相同的循环脚本），它会非常高兴，并且我的所有列表项都会获得它们的侦听器。

问题：为什么我不能将所有内容都放在一个 for 循环中，或者这是我的代码？

注意：我正在使用 Chrome 来运行它，如果它碰巧是浏览器的话。

感谢您的宝贵时间！

Answer 1

您正在修改 div 的每次迭代 for 循环的 innerHTML，从而导致绑定到以该 div 作为父节点的某个节点的所有事件处理程序丢失，因为修改 innerHTML 会导致从 HTML 重新创建所有子节点。

考虑到div.innerHTML += foo; 确实是div.innerHTML = div.innerHTML + foo; 的简写，我的意思应该很明显。

编辑：我意识到我的回答已被接受（截至 2013 年 4 月 8 日），但我仍然觉得我的措辞可以更好一些。

将node.innerHTML = bar 视为“用可以从给定字符串（在bar）中解释的任何HTML 替换节点的所有子节点”。它只是作为给定字符串的一部分发生的，您通过node.innerHTML.. 为节点的前孩子提供了 HTML 序列化，因此您可能失去的不仅仅是事件处理程序！

如您所见，这不是添加 html 的最佳方式。

作为旁注，假设您确实必须将一堆子节点添加到一个节点，如果事件可以冒泡（请参阅HTML DOM: Which events do not bubble?，或Wikipedia's article on DOM events 上的更完整列表） ，而不是为每个子节点添加一个处理程序，您还可以向 parent 节点添加一个事件处理程序，并且在现代浏览器 (IE9+) 中，许多事件可以按 冒泡。最近我还没有直接处理 DOM 中的事件冒泡，但是许多第三方库很容易支持这种事件委托。使用 jQuery，查看jQuery.on，绑定声明的工作方式类似于：

 jQuery(parentnodeselector).on(eventname,childselector)

AFAIK，自己处理事件冒泡并不难......如果事件冒泡，您将需要能够通过event.target 和event.target 的父母来识别不过，通过正确的孩子。

Answer 2

不应鼓励内联事件处理程序，尤其是在使用 innerHTML 动态创建时。我什至记得在这种情况下阅读过关于 IE 中发生的事情的坏消息。尝试使用类似这样的东西，它使用更合适的方法向 DOM 添加元素：

for (var i = 0; i < JSONarray.response.artists.length; i++) {
    var artistName = JSONarray.response.artists[i];
    var newH4 = document.createElement("h4");
    newH4.id = "artist" + i;
    newH4.accessKey = artistName.id;    // You might have to use newH4.setAttribute("accessKey", artistName.id) instead
    newH4.innerHTML = "Artist Name: " +  artistName.name;
    newH4.addEventListener("click", moreInfo, false);
    div.appendChild(newH4);
}

如果您在意，旧版 IE 没有 addEventListener - 因此您需要检查 addEventListener，如果不可用则使用 attachEvent。只是一个警告。比如：

if (newH4.addEventListener) {
    newH4.addEventListener("click", moreInfo, false);
} else if (newH4.attachEvent) {
    newH4.attachEvent("onclick", moreInfo);
} else {
    newH4.onclick = moreInfo;
}

此外，您不应在循环中的同一元素上使用innerHTML。创建一个大字符串并将其附加到 for 循环内，然后在循环 after 元素上设置 innerHTML 会更有效。随着 JSONarray.response.artists 数组大小的增加，这一点变得更加重要。

Answer 3

貌似是dom更新问题

for(var i = 0; i < JSONarray.response.artists.length; i++){
      var artistName = JSONarray.response.artists[i];
      div.innerHTML += '<h4 id="artist' + i + '" accessKey="' + artistName.id + '" onclick="moreInfo(this)">Artist Name: ' +  artistName.name + '</h4>';
}

演示：Fiddle