JavaScript

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の学習本を探してる方はこちらの記事をどうぞ

2023年版 Webコーディングにオススメの学習本【HTML/CSS/JavaScript】この記事では、初心者から中級者以上まで、Webコーディングの学習にオススメの学習本をご紹介します。この記事で紹介する本は、分かりやすい解説や実践的な例題、デザインや解説図など、学習をサポートするいろんな要素が含まれている本を選びました。ぜひ、自分に合った本を見つけて、ウェブ制作のスキルを磨いてみてください。...

 

ABOUT ME
りん
沖縄から福岡に移住。QA/Webデザイナー/SE/フリーランス/SE人事など。趣味や好きなことをブログにまとめてます。