input type=hidden の値が変わったら通知したい。

JSをデバッグしててhiddenがどこから更新されてるのか知りたかった。

ある操作をしたら、input[type=hidden] が書き換わるので、そのJSを特定しようと頑張ろうとした。

めっちゃめんどくさい。hidden には onchangeイベントが発火しないんですよ。

MutationObserverを使うとできるんです。

var observer = new MutationObserver(function (MutationRecords, MutationObserver) {
  debugger;
});

observer.observe(document.querySelector("input[type='hidden]"), {
  childList: false,
});

これで監視はできるんだけど、面倒なので input[type=hidden] を input[type=text]にして、display:none にしたほうが早い。そりゃそうだよね。ってすごく納得した。

参考資料

INPUT要素でtype属性がhiddenの要素のvalue値に変更があったらchangeイベントを発火させる - babu_babu_babooのごみ箱