element.innerHTMLを使用した後にイベントリスナーが機能しなくなるのはなぜですか？

Question

私はJavaScriptの初心者です。 JavaScriptの本はelement.innerHTMLの欠点の一つであることを言う：意図したとおりに

イベントハンドラが動作しなくなることがあります。

この意味は理解できません。誰かが私に例を与えることができますか？

Answer 1

おそらく、それは一部の人々が最後にHTMLを挿入するために使用する技術を指します。

既存の要素の内部状態（イベントリスナー、チェックなど）はすべて失われます。

var btn = document.querySelector("button"); 
 
btn.addEventListener("click", function() { 
 
    btn.textContent = "I won't work anymore"; 
 
    document.body.innerHTML += "<p>Inserted text</p>"; 
 
});

<button>Click me to insert HTML</button>

あなたは要素の最後にいくつかのHTMLを挿入したい場合は代わりに、あなたは、これは既存の要素を保持します

element.insertAdjacentHTML('beforeend', "inserted HTML"); 

を使用することができます。

var btn = document.querySelector("button"); 
 
btn.addEventListener("click", function() { 
 
    btn.textContent = "I still work"; 
 
    document.body.insertAdjacentHTML("beforeend", "<p>Inserted text</p>"); 
 
});

<button>Click me to insert HTML</button>

別の方法として、あなたが要素内にラップされる挿入されたコンテンツを気にしない場合は、appendChildを使用している：

var btn = document.querySelector("button"); 
 
btn.addEventListener("click", function() { 
 
    btn.textContent = "I still work"; 
 
    var wrapper = document.createElement('div'); 
 
    wrapper.innerHTML = "<p>Inserted text</p>"; 
 
    document.body.appendChild(wrapper); 
 
});

<button>Click me to insert HTML</button>

Answer 2

element.innerHTML関数でJavascriptで要素を動的に作成すると、新しく作成された要素が意図したとおりにイベントリスナーのメソッドに応答しないことがあるためです。

Answer 3

innerHTMLは要素のHTMLコンテンツの文字列表現あります。これらのコンテンツを取得することは副作用はありませんが、ブラウザを強制的にリセットすると、要素が生成されます。

ドキュメント内の各HTMLタグは、ブラウザによって一意のDOM HTMLElementオブジェクトとして解析されます。イベントハンドラはこれらの要素にバインドされています。 innerHTMLプロパティをリセットすることにより、ブラウザは古い要素を削除し、DOMパーサーに新しいHTML文字列に基づいて他の要素オブジェクトを作成させます。要素が削除されると、イベントハンドラも削除されます。

ハンドラを介してクリックイベントに応答する要素があるとします。要素がクリックされていない場合、ハンドラも削除されていると感じます。イベントハンドラがガベージコレクトされる方法は、書き込まれたコードとJavaScriptインタプリタの動作方法によって異なります。これは、現在のHTMLを取得し、挿入1でそれを連結し、それをすべて解析する

element.innerHTML += "inserted HTML"; 

：