イベントフロー検証ツール

 

JavaScriptにおけるイベントの伝播状況を、GUI操作により検証するためのツールです。

コントロールパネルを使用して、任意のオブジェクトに対してリスナを登録できます。 リスナが登録されている状態でイベントを送信すると、 ディスプレイパネルにイベントが伝播した順序が表示されます。

ディスプレイパネル
DIV0  Capture[ - ]  Bubble[ - ]
DIV1  Capture[ - ]  Bubble[ - ]
DIV3
 Capture[ - ]  Bubble[ - ]
DIV2
 Capture[ - ]  Bubble[ - ]

コントロールパネル
オブジェクト リスナの登録 イベントの送信
Capture Bubble イベントの種類 送信

DIV0








DIV1








DIV2








DIV3








使用例

STEP.1 リスナの登録

DIV0, DIV1, DIV2, DIV3 の4つのオブジェクトのBubble(バブルフェーズ)に対して「click」イベントを登録する。

STEP.2 イベントの送信

DIV3 のオブジェクトに対して「click」イベントを送信する。

STEP.3 ディスプレイパネルの確認

DIV0 ⇒ 3、 DIV1 ⇒ 2、 DIV3 ⇒ 1 と表示される。

このことから、バブルフェーズでのイベントは、 泡が湖底から湖面に向かって上昇するように伝播していくことが解る (DIV3の隣にあるDIV2には伝播しない)。

STEP.4 検証課題
  • DIV1に「伝播を停止」を設定してから、 DIV3 のオブジェクトに対して「click」 イベントを送信するとどうなりますか?
  • DIV1のイベントを「click」から 「mouseover」に変更してから、DIV3 のオブジェクトに対して「click」イベントを送信するとどうなりますか?
【注意】

IE にはキャプチャフェーズがありません。 キャプチャフェーズを検証するには、Firefox か Opera を使用してください。

ソースコード

改版履歴

日付 内容
2006-06-11 初版