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

JavaScript 
<!DOCTYPE hrml>
<head>
  <meta charset="utf-8">
  <title></title>

<body>
<p>

<form>
  <img id="img" src="" alt="写真" width="200" height="100">
  <input type="hidden" name="hide" value="">
  <input type="text" name="txt" value="">
</form>


<script>
//____________________________
{
  /*#####################################################
     input[type="hidden"]の要素の value値に変更があった場合
     change イベントを発火させる
  #####################################################*/

  const

    option = {
      attributes      : true,
      attributeFilter : ['value']
    },


    handler =
      function ([mutation]) {
        let
          target = mutation.target,
          doc    = target.ownerDocument,
          event  = doc.createEvent ('HTMLEvents');

        event.initEvent ('change', true, true);
        target.dispatchEvent (event);
      };

  //_____________________________


  class AddChangeEvent {

    constructor (element = null) {
      if (null === element)
        throw new Error ('要素がありません');

      let observer = new MutationObserver (handler);
      observer.observe (element, option);

      this.observer = observer;
    }

  }

  //_____________________________

  this.AddChangeEvent = AddChangeEvent;
}




let
  fm = document.querySelector ('form'),
  hide = fm.elements['hide'];

//changeイベントは、form要素で監視する
fm.addEventListener ('change', function (event) {
  let e = event.target;
  alert ([e.name, e.value]);
 }, false);


//設定
new AddChangeEvent (hide);

hide.value = "abc"; //イベント発火すればOK！
</script>

うすうすは、感じていたさ。
type属性にhiddenなんかせず、display:none にすれば解決することを・・・