javascript - Javascript：在对象文字的函数内部定义的事件侦听器使代码失效

Question

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

我的问题是这个..当我点击'draw'按钮时，它第一次工作..成功点击按钮不会调用监听器。为什么会发生这种情况......事件侦听器和对象文字有什么问题......为什么会发生这种奇怪的行为？

我已经给出了适当的评论和一些有用的警报消息（请不要对警报消息投反对票：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 中，这些分离的事件监听器甚至会导致内存泄漏。