- JavaScript
- 2024-08-27
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
129 views