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

使用例

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 を使用してください。

ソースコード

• CSS
• HTML
• DXBL 0.2.0 （クロスブラウザライブラリ）
• JavaScript

改版履歴