DOM 属性の変更を検出して対応する方法: Mutation イベントと MutationObserver

DOM 属性変更イベントのトリガー

Web 開発では、動的な Web アプリケーションにとって DOM 属性の変更を監視することが重要です。 Mutation Events は、これらの変更に対応するメカニズムを提供します。ただし、これらは現在非推奨であり、MutationObserver API に置き換えられています。

非推奨のミューテーション イベント:

古いブラウザではミューテーション イベントがサポートされており、開発者は特定の方法で DOM の変更を処理できました。 「DOMSubtreeModified」などのイベント タイプ。ただし、これらのイベントはベスト プラクティスとはみなされなくなりました。

MutationObserver の使用:

代わりに、DOM 属性の変更を検出する最新のアプローチは、MutationObserver API を使用することです。このブラウザネイティブ機能は、DOM の変更を監視し、特定の属性またはプロパティが変更されたときにコールバックをトリガーする方法を提供します。

使用例:

IMG が変更されたときにイベントをトリガーするにはsrc 属性を変更する場合は、次のコードを使用できます:

<code class="javascript">const img = document.querySelector('img');
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.attributeName === 'src') {
      // Custom event handled here
      dispatchEvent(new CustomEvent('imageSrcChanged', { detail: mutation.newValue }));
    }
  });
});
observer.observe(img, { attributes: true });</code>

また、jQuery の Mutation Events プラグインなどのライブラリを使用して、DOM ミューテーション イベントの実装を簡素化し、利点を活かしながら古いブラウザとの互換性を確保することもできます。最新のブラウザ用の MutationObserver API の。

以上がDOM 属性の変更を検出して対応する方法: Mutation イベントと MutationObserverの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。