要素の中身が変更されたときのイベントを検知したい
- JavaScript
-
2024-08-27
この記事は最終更新日から1年以上経過しています。
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
この記事がお役に立ちましたらシェアお願いします
1,260 views




