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

多くのシナリオでは、画像のソースや div の HTML が変更されたときなど、DOM 属性の変更を検出する必要があります。コンテンツの更新。この機能に対するブラウザのサポートは時間の経過とともに進化してきました。

DOM 変異イベント (レガシー)

以前は、DOM 変異イベントは属性の変更をリッスンする方法を提供していました。これらのイベントには次のものが含まれます:

• DOMAttrModified
• DOMNodeInserted
• DOMNodeRemoved

ただし、DOM ミューテーション イベントに対するブラウザのサポートに一貫性がなく、

MutationObserver API

DOM Mutation Events の代わりに、MutationObserver API が導入されました。 MutationObserver は、DOM 属性や DOM のその他の側面の変更を検出するための、より堅牢で広くサポートされている方法を提供します。

MutationObserver を使用すると、オブザーバー インスタンスを作成し、監視する変更の種類を指定できます。 DOM 内で一致する変更が発生すると、オブザーバーは通知します。

ここでは、MutationObserver を使用して画像のソース属性への変更を検出する方法の例を示します。

// Create an observer instance
const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    // Check if the mutation is for the "src" attribute
    if (mutation.attributeName === "src") {
      // Do something in response to the source change
    }
  }
});

// Start observing the specified target node
observer.observe(image, { attributes: true, attributeFilter: ["src"] });

この例では、オブザーバーはイメージ ノードの src 属性を監視するように構成されており、指定されたコールバックを呼び出します。

jQuery Mutation Events プラグイン

jQuery を使用している場合は、MutationObserver の代わりに Mutation Events プラグインを利用できます。このプラグインは、DOM 属性の変更を処理するための簡略化されたインターフェイスを提供し、特定の属性の変更のみに興味がある場合に役立ちます。

$(image).on("DOMAttrModified", (event) => {
  if (event.attrName === "src") {
    // Do something in response to the source change
  }
});

MutationObserver または jQuery Mutation Events プラグインを利用すると、DOM 属性の変更を効果的に検出し、それらの変更に応じてカスタム アクションを実行できます。