Javascript：在对象文字的函数内定义的事件监听器使代码死机

Question

我创建了以下代码 http://jsfiddle.net/N65yS/41/ ..

我的问题是这个.. 当我点击“绘图”按钮时，它第一次正常工作。按下按钮的单击不会调用监听器。 为什么会这样？ 事件监听器和对象文字有什么问题吗？ 为什么会发生这种奇怪的行为？

我已经给出了适当的评论和一些有用的警报信息（请不要投票给警报信息：P）..

Answer 1

在这一行

document.body.innerHTML += elm;

您要在文档中添加另一个元素。然而！这一行的作用是

document.body.innerHTML = document.body.innerHTML + elm;

浏览器获取文档的整个HTML标记，并将elm的标记添加到其中。然后，当您分配到document.body.innerHTML时，浏览器删除文档中的所有元素，然后解析表达式document.body.innerHTML + elm和添加从它到文件的所有元素再次。

这意味着不仅添加了新元素elm，而且首先删除了文档正文中的每个其他元素，然后再将新的实例添加到文档中。 在此过程中，所有事件侦听器都丢失了！实际上，在旧IE中，这些分离的事件侦听器甚至导致内存泄漏。