javascript - 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では、これらの切り離されたイベントリスナーがメモリリークを引き起こしていました。