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

Question

I have created the following code http://jsfiddle.net/N65yS/41/ ..

My problem is this.. When I click on the 'draw' button ,for the first time it is working..Succeding clicks on the button is not calling the listener. Why is this happening... Is there any problem with event listeners and object literals.. Why is this strange behaviour happening?

I have given proper comments and some helpful alert messages (and please dont down vote for the alert messages :P)..

Answer 1

At this line

document.body.innerHTML += elm;

you are adding another element to the document. However! What this line does is

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

The browser takes the whole HTML markup of the document and adds the markup of elm to it. Then, when you assign to document.body.innerHTML, the browser removes all the elements from the document, then parses the expression document.body.innerHTML + elm and adds all the elements from it to the document again.

This means that not only your new element elm is added, but every other element in the document body is first removed and then a new instance of it is added to the document again. During this process, all event listeners are lost! In fact, in old IE these detached event listeners even caused memory leaks.