伝播するイベント

では，円がクリックされたときに，内部ではどのような動作をしているのでしょうか。イベントオブジェクトの流れを見てみましょう。

円がクリックされると，まずは円オブジェクトにイベントオブジェクトがやってきます（図の一番下⁠）⁠。この時点で円に対して登録されたイベントハンドラが呼ばれます。

次に，イベントは親の表示オブジェクトに伝播していきます。円の親であるClickTestオブジェクト，その親であるStageオブジェクトの順に伝わっていきます。Stageオブジェクトにイベントが到達すると，イベントハンドラのclickHandler()メソッドが呼ばれます。このときに新たに円が生成されるわけです。

このようにイベントは複数の表示オブジェクトを順番に伝わっていきます。イベントがターゲットである円に到達したときをターゲット段階といいます。ターゲットから親に向かって伝播していく段階のことを，泡のように広がりながらさかのぼっていくことからバブリング段階といいます。

伝播を止めるには

イベント伝播の仕組みが分かったところで，最初の問題に戻ります。円をクリックしたときには円が消えるようにしましょう。

1つの方法として，イベントの伝播を抑制することができます。伝播を止めるには，イベントオブジェクトのstopPropagation()メソッドを呼びます。

s.addEventListener("click", function(event:MouseEvent):void {
    removeChild(s);

    // 親に伝播しないようにする
    event.stopPropagation();
});

この結果，円オブジェクトより先にイベントが伝播しなくなります。つまり，円をクリックしても，ステージのイベントハンドラが呼ばれず，新たに円が生成されることはなくなります。

イベントオブジェクトのプロパティを利用する

しかし，伝播を止めてしまうと不都合が出る場合もあります。例えば，ClickTestオブジェクトでもイベントを検知したいかもしれません。そのような場合にはどうすればいいでしょうか。

答えは簡単です。clickHandler()メソッドで，イベントのターゲットが円だった場合には何も行わないようにすればよいのです。イベントのターゲット（クリックされた表示オブジェクト）は，イベントオブジェクトのtargetプロパティで参照できます。

private function clickHandler(event:MouseEvent):void {
    // ステージ以外がクリックされたときには何もしない
    if(event.target != stage) {
        return;
    }

他の方法も考えられます。イベントオブジェクトには，イベントがどの段階なのかを表すeventPhaseプロパティが定義されています。

private function clickHandler(event:MouseEvent):void {
    // ターゲット段階以外では何もせず終了する
    if(event.eventPhase != EventPhase.AT_TARGET) {
        return;
    }

円をクリックした場合には，バブリング段階でclickHandler()メソッドが呼ばれるので，何もせずにretrunで終了することにします。EventPhaseクラスを利用しているので，flash.events.EventPhaseをインポートするのを忘れないようにしましょう。

キャプチャ段階について

ここでは触れませんでしたが，ターゲット段階，バブリング段階のほかに，キャプチャ段階というものもあります。キャプチャ段階はあまり利用しないので，今回は分かりやすく説明するために省略しました。

キャプチャ段階はターゲット段階の手前の処理です。Stageオブジェクトから始まり，ターゲットに到達するまで，表示オブジェクトの階層を降りていきます。この段階のことをキャプチャ段階というのです。詳しくは「ActionScript 3.0のプログラミング」のイベントフローの項目をご覧ください。

まとめ

今回は，イベントの概念やイベントを監視する方法をご紹介したあとに，イベントの伝播について詳しく説明ました。最後のイベント伝播は，少し難しかったかもしれませんね。ひとまずは，イベントが親の方向に伝播していくことを覚えていただければ幸いです。

次回は，イベントを活用しつつ，インタラクティブなアニメーションを作ってみたいと思います。