Don't miss out on the action at this year's Chrome Dev Summit, streaming live on YouTube. Watch now.

イベントの監視

Chrome DevTools コマンドライン API を使用すると、さまざまな方法でイベント リスナーを観察したり調査したりできます。JavaScript はインタラクティブなページで中心的な役割を果たすもので、ブラウザはイベントやイベント ハンドラのデバッグに役立つツールを提供します。

TL;DR

  • 特定のタイプのイベントは、 monitorEvents() を使用してリッスンします。
  • リッスンを停止するには unmonitorEvents() を使用します。
  • DOM 要素のリスナーは getEventListeners() を使用して取得します。
  • イベント リスナーに関する情報を取得するには、[Event Listeners Inspector] パネルを使用します。

イベントの監視

monitorEvents() メソッドを使用すると、DevTools は指定されたターゲットに関する情報を記録します。

最初のパラメータは、監視するオブジェクトです。2 つ目のパラメータが指定されていない場合は、すべてのイベントが返されます。リッスンするイベントを指定するには、文字列または文字列の配列を 2 つ目のパラメータとして渡します。

ページの本文に対するクリック イベントをリッスンする場合:

monitorEvents(document.body, "click");

監視対象イベントがサポート対象の「イベントタイプ」で、DevTools によって一連の標準のイベント名にマップされている場合、このメソッドはそのタイプのイベントをリッスンします。

コマンドライン API では、「イベントタイプ」を、対応するイベントに完全にマッピングしています。

イベントの監視を停止するには、unmonitorEvents() メソッドを呼び出し、そのメソッドに監視を停止するオブジェクトを指定します。

body オブジェクトに対するイベントのリッスンを停止する場合:

unmonitorEvents(document.body);

オブジェクトに登録されているイベント リスナーの表示

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

戻り値は、登録済みの各イベントタイプ(click または keydown など)の配列が含まれるオブジェクトです。各配列のメンバーは、各タイプに登録されているリスナーを記述するオブジェクトです。たとえば、次のコードでは、ドキュメント オブジェクトに登録されているすべてのイベント リスナーのリストが表示されます。

getEventListeners(document);

getEventListeners() を使用した場合の出力

指定したオブジェクトに複数のリスナーが登録されている場合は、配列に各リスナーのメンバーが含まれます。次の例では mousedown イベントについて、#scrollingList 要素に 2 つのイベント リスナーが登録されています。

mousedown にアタッチされたイベント リスナーの表示

これらの各オブジェクトをさらに展開して、そのプロパティを調べることができます。

リスナー オブジェクトの展開されたビュー

DOM 要素に登録されているイベント リスナーの表示

デフォルトでは、Elements Inspector の [Event Listeners] パネルには、ページにアタッチされているすべてのイベントが表示されます。

[Event Listeners] パネル

フィルタを使用すると、イベントが選択したノードのみに限定されます。

![[Selected Node Only] でフィルタされた [Event listeners] パネル](images/events-eventlisteners_panel_filtered.png)

オブジェクトを展開すると、パネルにイベント リスナーの詳細が表示されます。この例では、ページに jQuery 経由で 2 つのイベント リスナーがアタッチされています。

展開されたイベント リスナーのビュー