各段階でのイベント処理

ターゲット段階のイベントリスナ登録

単純に直接イベントが発生するコンポーネントにイベントリスナ登録を行うことで、ターゲット段階でイベントが通知されることになります。

<mx:Button click="buttonClick(event)" label="Click Me" id="button"/>

mx:Buttonでボタンクリックのリスナしたい場合には、このように記述します。
そのままですね。

バブリング段階のイベントリスナ登録

この場合もターゲット段階と同じようにイベントリスナ登録をするだけです。ターゲット段階と違うのは、イベントが発生するコンポーネントの親にイベントリスナ登録をするという点です。

<mx:Panel id="panel" click="buttonClick(event)">
	<mx:Button label="Click Me" id="button"/>
</mx:Panel>

ただし、このままだとmx:Panelのターゲット段階のイベントと区別が付かないので、イベントハンドラ側で処理に工夫を入れます。

private function buttonClick(event:Event):void {
	if (event.type == 3) {
		//バブリングの通知で行う処理
	}
}

event.typeプロパティの値はイベント段階ごとに異なる数字を返すので、この数字でどの段階なのかを判定することができます。

• 1: キャプチャ段階
• 2: ターゲット段階
• 3: バブリング段階

キャプチャ段階のイベントリスナ登録

キャプチャ段階のイベントだけは少し特殊で、MXMLでは記述できない仕様になっています。そのため、ActionScriptで直接記述する必要があります。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="init();">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			
			private function init():void {
				panel.addEventListener(MouseEvent.CLICK, buttonClick, true);
			}
			
			private function buttonClick(event:Event):void {
				var target:Button = event.target as Button;
				if (target != null) {
					//ターゲットがmx:Buttonの場合だけ行う処理
					Alert.show(event.target.id + " was clicked");
				}
			}
		]]>
	</mx:Script>
	
	<mx:Panel id="panel">
		<mx:Button label="Click Me" id="button"/>
	</mx:Panel>
</mx:Application>

ActionScriptで記述する場合には、addEventListener()メソッドを使用して、第3引数をtrueにする必要があります。ちなみに、この第3引数がfalseか省略された場合には、ターゲット段階やバブリング段階のイベントリスナ登録になります。

キャプチャ段階のイベントリスナは使いどころが限られるように思います。
実際に使用する場面は、たとえばリソースロード中のマウス操作のキャンセルなど、発生したイベントを取り消す処理に使われるぐらいではないでしょうか。