カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

要素の中身が変更されたときのイベントを検知したい

onchangeイベントはform要素のinputではないdiv等の要素では検知することが出来ません。
そんな時はどうすれば良いでしょうか?その方法をご紹介します。

MutationEvent ※非推奨

そんな時、以前はこんな方法がありました。
※サンプルコードではjQueryを使用しています。

サンプルのHTML

<input type="button" id="click_me" value="Click!">
<div id="sample"></div>

DOMSubtreeModified propertychangeイベントを使って変更を検知する

$(document).ready(function() {
    $('#sample').on('DOMSubtreeModified propertychange', function() {
        alert('Change!');
    });
    $('#click_me').click(function() {
        $('#sample').text('Change!');
    });
});

しかしながら上記のMutationEvent非推奨となっています。
現在は代わりにMutationObserverを使って同様のことが出来るようになっています。

MutationObserver

まずはターゲットとなる要素を指定します。

const targetNode = document.getElementById('sample');

MutationObserverを宣言し、コールバックにて実行したい処理を実装します。

const MObserver = new MutationObserver(function(mutationList, observer) {
    for (const mutation of mutationList) {
        if (mutation.type === "childList") {
            console.log("子ノードが追加または削除されました。");
        } else if (mutation.type === "attributes") {
            console.log(`${mutation.attributeName} 属性が変更されました。`);
        }
    }
});

次に動作に関する設定をオプションにオブジェクトで渡すため作成します。
childList, attributes, characterDataのいずれかがtrueでないとエラーが発生します。

const config = {
    childList: true,        //「子ノード(テキストノードも含む)」の変化
    attributes: true,       //「属性」の変化
    characterData: true,    //「テキストノード」の変化
};

最後に observe メソッドで要素の監視を開始します。
こちらを実行しないと何も起こらないのでご注意ください。

MObserver.observe(targetNode, config);

途中で監視を停止したいときは disconnect メソッドを実行します。

MObserver.disconnect();

参考URL:
MutationEvent – Web API | MDN
MutationObserver – Web API | MDN

この記事がお役に立ちましたらシェアお願いします
156 views

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です