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