Javascript：在object literal的函数中定义的事件侦听器使代码失效

我创建了以下代码

我的问题是。。 当我点击“draw”按钮时，它第一次起作用。继续点击按钮并没有呼叫侦听器。 为什么会这样。。。 事件侦听器和对象文本是否存在任何问题。。 为什么会发生这种奇怪的行为

我已经给出了适当的评论和一些有用的警告信息（请不要对警告信息投反对票：p）

document.body.innerHTML += elm;

您正在向文档中添加另一个元素。然而！这条线的作用是

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

浏览器获取文档的整个HTML标记，并将

elm

的标记添加到文档中。然后，当您指定给

document.body.innerHTML

时，浏览器会从文档中删除所有元素，然后解析表达式

document.body.innerHTML+elm

，并再次将其中的所有元素添加到文档中

这意味着不仅要添加新元素

elm

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

document.body.innerHTML += elm;

您正在向文档中添加另一个元素。然而！这条线的作用是

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

浏览器获取文档的整个HTML标记，并将

elm

的标记添加到文档中。然后，当您指定给

document.body.innerHTML

时，浏览器会从文档中删除所有元素，然后解析表达式

document.body.innerHTML+elm

，并再次将其中的所有元素添加到文档中

这意味着不仅要添加新元素

elm

，而且要先删除文档正文中的所有其他元素，然后再将其新实例添加到文档中在此过程中，所有事件侦听器都将丢失事实上，在旧IE中，这些分离的事件侦听器甚至导致内存泄漏