monitorEvents で、 input タグの発生イベントを監視する

やりたかったこととしては、Chrome DevTools コマンドライン API で、
input タグの発生イベントを監視したかったのですが、
挙動を知らずに、少しはまったので、はまった内容を記載します。

---

OS と Chrome の Version

• OS の verison Mac Siera です。
  

  sw_vers -productVersion 
  --------------------------
  10.12.6
  --------------------------
  

• Chrome の verison
  60.0.3112.78 です。

---

参考

• 任意のイベントオブジェクトを Web ブラウザのコンソールに出力する monitorEvents が便利 - Qiita

• イベントの監視  |  Web  |  Google Developers

---

やりたかったこと

画面に複数ある、inputタグ上で発生する focusout event を監視したかった。

---

monitorEvents の挙動

• 複数のタグに対して monitorEvents は設定できない。
  以下のコードはエラーにはなりませんが、監視対象として登録もされません。
  

  inputs = document.querySelectorAll("input");
  monitorEvents(inputs);
  

• for 文で回しても駄目 (おそらく最後のmonitorEvents のみ有効になる)
  

  inputs = document.querySelectorAll("input");
  for (var input in inputs) {
      monitorEvents(input);   
  }
  

• 単一のタグであれば監視対象にできる
  

  input = document.querySelector("#id");
  monitorEvents(input);
  

---

やりたかったことを実現するのに取った方法

addEventListener で 監視対象eventにログを仕込みました。

• addEventListener で focusout 時にログ出力する
  

  document.addEventListener('focusout', function(e) {
  var contentDocument = e.target;
  if ("INPUT" == contentDocument.tagName) {
      console.log(e.type + " event was fired on tag " + contentDocument.name);
  }
  });
  

addEventListener だと、既存のeventの上書きはせず、追加となります。
これでevent の発火をウォッチングすることにしました。

ただ、問題となっているinput タグに狙ってmonitorEventsを仕込めば、
原因調査としては十分な気もしております。
複数要素どうしの関係を調査したい時などは、addEventListnerを使うのかと思います。
以上です。