class要素が変更されたときにeventを発火する方法【JavaScript】

この記事では、JavaScriptを使用してclass要素の変更を検知し、class要素が変更されたときにイベントを発火させる方法について紹介します。

class要素の変更を監視する方法

「MutationObserver」を使用する

MutationObserverは、DOMの変更を監視するためのJavaScriptの組み込みオブジェクトです。これを使用すると、要素の属性や内容の変更をリッスンし、それに対応するイベントを発火させることができます。

const targetElement = document.querySelector('.target-element');

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.attributeName === 'class') {
      // class要素が変更されたときの処理を記述
    }
  });
});

const config = { attributes: true };

observer.observe(targetElement, config);

クラス変更イベントのハンドリング

「addEventListener」を使用する

要素のclassが変更された際に、特定のイベントをトリガーしたい場合、addEventListenerを利用する方法もあります。

const targetElement = document.querySelector('.target-element');

targetElement.addEventListener('DOMAttrModified', (event) => {
  if (event.attrName === 'class') {
    // class要素が変更されたときの処理を記述
  }
});

まとめ

class要素が変更されたときにeventを発火させる方法について、MutationObserverとaddEventListenerについて解説しました。MutationObserverは高度な監視が必要な場合に使用するのが適しており、addEventListenerはシンプルな実装に適しています。プロジェクトの要件に応じて適切な方法を選択してみてください。

▼HTML/CSS/JavaScriptの学習本を探してる方はこちらの記事をどうぞ