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 です。


参考


やりたかったこと

画面に複数ある、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を使うのかと思います。
以上です。

コメント