JSでDOMの要素の変化を監視してイベントを発生させる

<div id="navi" class="nav-header">

ページをある程度スクロールすると

<div id="navi" class"nav-header header-fixed">

など、クラス名が動的に追加される場面があります。

ここでは要素を監視し、クラス名にheader-fixedが追加されたらイベントを発生させる方法を説明します。

使用する機能

ここではMutationObserverのクラスを使用します。

MutationObserverとは

MutationObserver（ミューテーションオブザーバー）は

• Mutation　→　突然変異
• Observer　→　観察者

という意味があり、DOMに変化が加わったことを監視し、変更があった場合にコールバックを起動する組み込みのオブジェクトになります。

使い方

トリガーの指定

次のように監視するDOMを指定します。

var target = document.getElementById('navi');

オブザーバーの作成

次のように変化が発生したときの処理を指定します。

var observer = new MutationObserver(records => {
  if (jQuery('#navi').hasClass('header-fixed')) {
    alert('header-fixed exists.');
  } else {
    alert('header-fixed is not exists.');
  }
});

監視を開始する

次の記述で監視を開始します。

observer.observe(target, {
  attributes: true,
  attributeFilter: ['class']
});

これでheader-fixedのクラスが動的に追加・削除を監視してアラートを出す事ができます。

監視を停止

次の記述で監視を停止します。

observer.disconnect();