Javascript:addEventListener 不在 for 循环中工作

Question

情况:我正在从 API 获取一个 JSON 数组。 “div”来 self 代码前面的 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

您在每次 for 循环迭代中修改 div 的 innerHTML，从而导致所有绑定(bind)到以该 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 中的事件冒泡，但是许多第三方库很容易支持这种事件委托(delegate)。使用 jQuery，查看 jQuery.on，绑定(bind)声明的工作方式如下:

 jQuery(parentnodeselector).on(eventname,childselector)

AFAIK，你自己处理事件冒泡并不难......你会需要能够通过event.target和event来识别.target 的 parent ，如果事件通过正确的 child 冒出来的话。