イベント通知サンプル

前回と前々回の動作がわかる簡単なサンプルを作ってみました。
キャプチャ段階(Capturing Phase)→ターゲット段階(At Target)→バブリング段階(Bubbling Phase)という順番にイベントが通知されていくのがわかると思います。

ソース

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="init();" click="buttonClick(event)">
	<mx:Script>
		<![CDATA[
			private function init():void {
				this.addEventListener(MouseEvent.CLICK, buttonClick, true);
				this.panel.addEventListener(MouseEvent.CLICK, buttonClick, true);
			}
			
			private function buttonClick(event:Event):void {
				const type:Object = {1:"[Capturing Phase]", 2:"[At Target]", 3:"[Bubbling Phase]"};
				dump.text += type[event.eventPhase] + event.currentTarget.id + "\n";
			}
		]]>
	</mx:Script>
	
	<mx:Panel label="My Panel" id="panel" layout="horizontal" click="buttonClick(event)">
		<mx:Button label="Click Me" id="button" click="buttonClick(event)"/>
		<mx:TextArea width="200" height="100" id="dump"/>
	</mx:Panel>
	
</mx:Application>

実行結果