DOM ノードの innerHTML を更新するときにイベント リスナーを保持するにはどうすればよいですか?

innerHTML 変更時のイベント リスナーの保持

DOM ノードの innerHTML に割り当てる場合、子孫要素にアタッチされているイベント リスナーはすべて破棄されます。既存のイベント処理を損なうことなく追加のコンテンツを追加することが目的の場合、これは問題となる可能性があります。

解決策: insertAdjacentHTML

.insertAdjacentHTML() メソッドは、 innerHTML を変更する際のイベント リスナー。 'afterend' を使用して挿入されたコンテンツの場所を指定すると、既存の DOM 構造やそのイベント ハンドラーに影響を与えることなくコンテンツを追加できます。

例:

検討次のコード スニペット:

var mydiv = document.getElementById('mydiv');

// Appending content using .innerHTML (destroys event listeners)
mydiv.innerHTML += '<p>New paragraph</p>';

// Appending content using .insertAdjacentHTML (preserves event listeners)
mydiv.insertAdjacentHTML('beforeend', '<p>New paragraph</p>');

この例では、 .insertAdjacentHTML() メソッドは、既存のイベント リスナーを保持しながら、新しい段落を #mydiv 要素に正常に追加します。このアプローチは、イベント処理を損なうことなく、コンテンツの変更が必要なあらゆる DOM 要素に適用できます。

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