Javascript : Event listener defined inside function of object literal making the code dead

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中，这些分离的事件监听器甚至会导致内存泄漏。