DOM 属性が変更されたときにイベントをトリガーするにはどうすればよいですか?

属性変更イベント処理

DOM 属性が変更されたときにイベントをアクティブにすることはできますか?たとえば、画像のソースやディビジョンの内部 HTML が変更された場合、

ミューテーション イベントがこの問題の解決策を提供します。これらのイベントに対するブラウザーのサポートは限られていますが、属性の変更を監視する方法を提供します。

具体的には、Mutation Events の代わりに MutationObserver インターフェイスを利用できます。 MutationObserver は、属性の変更を含む DOM の変更を監視するための、より標準化された信頼性の高い方法を提供します。

属性の変更時に MutationObserver を使用してカスタム イベントをトリガーする方法は次のとおりです。

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'attributes') {
      const element = mutation.target;
      const attributeName = mutation.attributeName;
      const oldValue = mutation.oldValue;
      const newValue = mutation.newValue;

      // Trigger custom event with relevant information
      element.dispatchEvent(new CustomEvent('attributeChanged', {
        detail: {
          attributeName,
          oldValue,
          newValue
        }
      }));
    }
  });
});

// Observe the DOM element for attribute changes
observer.observe(document.querySelector('#myElement'), { attributes: true });

使用方法MutationObserver を使用すると、属性の変更を効果的に追跡し、それに応じてカスタム イベントを開始できるため、動的な DOM 変更に対応できます。

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