web-dev-qa-db-ja.com

どのJavaScriptイベントが発生したかを調べる方法は？

選択リストがあります：

<select id="filter">
  <option value="Open" selected="selected">Open</option>
  <option value="Closed">Closed</option>
</select>

Closedを選択すると、ページがリロードされます。この場合、（開かれたのではなく）閉じられたチケットが表示されます。手動で行うと正常に動作します。

問題は、 Watir でClosedを選択すると、ページがリロードされないことです。

browser.select_list(:id => "filter").select "Closed"

これは通常、JavaScriptイベントが発生しないことを意味します。 Watirでイベントを起動できます。

browser.select_list(:id => "filter").fire_event "onclick"

しかし、どのイベントを起動するかを知る必要があります。

要素に定義されているイベントを見つける方法はありますか？

javascripteventswatirdom-eventsbrowser-automation
113
Željko Filipin

Firebug （Firefoxアドオン）には答えがあります：

  • firebugを開く
  • hTMLタブで要素を右クリックします
  • Log Eventsをクリックします
  • コンソールタブを有効にする
  • 「コンソール」タブで「持続」をクリックします（そうでない場合、ページがリロードされた後、「コンソール」タブがクリアされます）
  • Closedを選択します（手動）

  • [コンソール]タブには次のようなものがあります。

    ...
mousemove clientX=1097, clientY=292
popupshowing
mousedown clientX=1097, clientY=292
focus
mouseup clientX=1097, clientY=292
click clientX=1097, clientY=292
mousemove clientX=1096, clientY=293
...

ソース： Firebugヒント：ログイベント

111
Željko Filipin

Chromeでも同様のことができると付け加えました。

Ctrl + Shift + I （開発ツール）> [ソース]> [イベントリスナーブレークポイント]（右側）。

要素を右クリックし、そのプロパティ（右側のパネル）を参照するだけで、既に添付されているすべてのイベントを表示することもできます。

例えば：

  • 左のアップボットボタンを右クリック
  • 検査要素を選択
  • スタイルセクションを折りたたむ（右端のセクション-ダブルシェブロン）
  • イベントリスナーオプションを展開する
  • これで、アップ投票にバインドされたイベントを確認できます

    • Firebugオプションと同じくらい強力かどうかはわかりませんが、ほとんどの場合はこれで十分です。

    少し異なりますが、驚くほど素晴らしいもう1つのオプションは、ビジュアルイベントです。 http://www.sprymedia.co.uk/article/Visual+Event+2

    バインドされているページ上のすべての要素が強調表示され、呼び出される関数を示すポップオーバーがあります。ブックマークにはかなり気の利いた！ Chromeプラグインもあります。他のブラウザについてはよくわかりません。

    AnonymousAndrew も指摘しています monitorEvents(window);here

    130
    Chris

    Chromeについては、コマンドラインAPIを介してmonitorEvents（）をチェックアウトしてください。

    • メニュー>ツール> JavaScriptコンソールからコンソールを開きます。
    • monitorEvents(window);と入力します

    • イベントであふれたコンソールを表示する

      ...
mousemove MouseEvent {dataTransfer: ...}
mouseout MouseEvent {dataTransfer: ...}
mouseover MouseEvent {dataTransfer: ...}
change Event {clipboardData: ...}
...

    documentation には他の例があります。この機能は前の回答の後に追加されたと思います。

    66
    AnonymousAndrew

    Google Chrome開発者コンソールで getEventListeners を使用できます。

    getEventListeners（object）は、指定されたオブジェクトに登録されているイベントリスナーを返します。

    getEventListeners(document.querySelector('option[value=Closed]'));
    0
    JSON C11