ホームページ >ウェブフロントエンド >jsチュートリアル >innerHTML を変更するときにイベント リスナーの損失を防ぐにはどうすればよいですか?

innerHTML を変更するときにイベント リスナーの損失を防ぐにはどうすればよいですか?

Patricia Arquette
Patricia Arquetteオリジナル
2024-12-15 19:40:19534ブラウズ

How Can I Prevent Event Listener Loss When Modifying innerHTML?

innerHTML に追加するときにイベント リスナーを保持する

親ノードの innerHTML に割り当てると、子孫にアタッチされたイベント ハンドラーが破棄される可能性があります。たとえば、次のコードを考えてみましょう以下:

<pre class="brush:php;toolbar:false"><span>

< script>

mydiv = document.getElementById("mydiv");
mydiv.innerHTML += "bar";


ここでは、 「foo」を含むスパンにアタッチされた onclick イベント ハンドラーは、mydiv.innerHTML への割り当て後に破棄されます。

この問題を回避するには、.innerHTML の代わりに .insertAdjacentHTML() メソッドを使用します。このメソッドはイベント リスナーを保持し、すべての主要なブラウザでサポートされています。

<script></p>
<pre class="brush:php;toolbar:false">var html_to_insert = "<p>New paragraph</p>";
document.getElementById('mydiv').insertAdjacentHTML('beforeend', html_to_insert);


「beforeend」引数は、要素内の HTML を挿入する場所を指定します コンテンツ。他のオプションには、「beforebegin」、「afterbegin」、「afterend」などがあります。

以上がinnerHTML を変更するときにイベント リスナーの損失を防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事:「setState」が React コンポーネントの状態をすぐに更新しないのはなぜですか?次の記事:「setState」が React コンポーネントの状態をすぐに更新しないのはなぜですか?

関連記事

続きを見る