イベントフローを理解するための練習

イベントフローを理解するための作品
ソースを一度読んでから問題に挑んでみると吉。

CapturePhase,TargetPhase,BubblingPhaseを
勉強しようとしてる人向けです。自分ですけど。

もし違ってたらご指摘お願いします。

多分、書籍「ActionScript3.0勉強ノート」に載ってます。

Stage上にMC
MC1の中にMC2
MC2の中にMC3

があります。MC1にしかaddEventListenerしてません。
useCaptureを変えたりして確認してみてください。

by Hiiragi 02 Jun 2009

Embed

package 
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.text.FontStyle;
	import flash.text.TextFieldAutoSize;
	
	/*
	 * イベントフローを理解するための作品
	 * ソースを一度読んでから問題に挑んでみると吉。
	 * 
	 * CapturePhase,TargetPhase,BubblingPhaseを
	 * 勉強しようとしてる人向けです。自分ですけど。
	 * 
	 * もし違ってたらご指摘お願いします。
	 * 
	 * 多分、書籍「ActionScript3.0勉強ノート」に載ってます。
	 * 
	 * Stage上にMC
	 * MC1の中にMC2
	 * MC2の中にMC3
	 * 
	 * があります。MC1にしかaddEventListenerしてません。
	 * useCaptureを変えたりして確認してみてください。
	 */
	[SWF(width = 465, height = 465, frameRate = 12, backgroundColor = 0xFFFFFF)]
	
	public class Main extends Sprite 
	{
		private var tf:TextField = new TextField();
		private var traceTf:TextField = new TextField();
		
		private var btnSp:SwitchBtn;
		private var box1:box;
		private var box2:box;
		private var box3:box;
		
		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);

			//四角を置く
			box1 = new box(0xFF8888,300)
			box1.x = 465 / 2;
			box1.y = 465 / 2;
			box1.name = "MC1";
			addChild(box1);
			
			box2 = new box(0x88FF88, 200)
			box2.name = "MC2";
			box1.addChild(box2);
			
			box3 = new box(0x8888FF, 100)
			box3.name = "MC3";
			box2.addChild(box3);
			
			
			box1.addEventListener(MouseEvent.CLICK , onClickHandler, false);
			
			
			//テキストを置く
			tf.autoSize = TextFieldAutoSize.LEFT;
			tf.defaultTextFormat = new TextFormat(null, 18, 0x999999, FontStyle.BOLD);
			tf.selectable = false;
			tf.text = "一番上のMC1にのみaddEventListenerしてます。\ntargetが30度回転する関数に関連付けてます。\nどこか四角を押してみてください。どこが回転するでしょう？";
			addChild(tf);
			
			
			//ボタンを置く
			var uc_txt:TextField = new TextField();
			uc_txt.text = "useCapture : ";
			uc_txt.setTextFormat(new TextFormat(null, 16, 0x333333, FontStyle.BOLD));
			addChild(uc_txt);
			uc_txt.x = 10;
			uc_txt.y = 430;
			
			btnSp = new SwitchBtn()
			btnSp.x = 110;
			btnSp.y = 430;
			addChild(btnSp);
			
			//出力用テキストを置く
			traceTf.defaultTextFormat = new TextFormat(null, null, 0x333333, FontStyle.BOLD);
			traceTf.selectable = false;
			traceTf.x = 0;
			traceTf.y = 380;
			traceTf.autoSize = TextFieldAutoSize.LEFT;
			addChild(traceTf);
			
			stage.addEventListener(SwitchBtn.FLAG_CHANGE, onflagChange);
			
			
			
			//おまけ
			stage.addEventListener(MouseEvent.CLICK, onStageClickHandler);
		}
		
		private function onStageClickHandler(e:MouseEvent):void 
		{
			//おまけ
			if (e.target.name == "MC1" && btnSp.getText == "true") {
				traceTf.text = "あれ、MC1が回らないですね。targetは間違いなくMC1のはずですが。\n何故でしょう。ヒントは「CupturePhaseとは何か」です。";
			}
		}
		
		private function onflagChange(e:Event):void 
		{
			var Flag:Boolean;
			
			if (btnSp.getText == "true") Flag = true;
			else Flag = false;
			
			box1.removeEventListener(MouseEvent.CLICK , onClickHandler,true);
			box1.removeEventListener(MouseEvent.CLICK , onClickHandler,false);
			box1.addEventListener(MouseEvent.CLICK , onClickHandler, Flag);
		}
		
		private function onClickHandler(e:MouseEvent):void 
		{
			var str:String;
			if (btnSp.getText == "true") str = "Capture時にMC1のイベントによりonClickHandlerが実行されました\n";
			else str = "Bubbling時にMC1のイベントによりonClickHandlerが実行されました\n";
			str += "target.name = " + e.target.name + " , currentTarget.name = " + e.currentTarget.name;
			
			//ここをtargetではなくcurrentTargetにしてみたらどうなるでしょう。
			e.target.rotation += 30;
			//e.currentTarget.rotation += 30;
			
			traceTf.text = str;
		}
		
	}
	
}


//以下、読む必要なし。単なる描画系クラスです。

import flash.display.Graphics;
import flash.display.Sprite;
import flash.events.MouseEvent;

class box extends Sprite {
	function box(color:uint,width:Number) {
		var g:Graphics = this.graphics;
		g.beginFill(color);
		g.drawRect( -width/2, -width/2, width, width);
		g.endFill();
		
		this.buttonMode = true;
	}
}



import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import flash.text.FontStyle;
import flash.events.Event;

class SwitchBtn extends Sprite {
	
	public static const FLAG_CHANGE:String = "flagChange";
	private var _tf:TextField = new TextField();
	
	function SwitchBtn() {
		var g:Graphics = this.graphics;
		g.beginFill(0x888888);
		g.drawRoundRect(0, 0, 80, 30, 10, 10);
		g.endFill();
		
		_tf.autoSize = TextFieldAutoSize.LEFT;
		_tf.defaultTextFormat = new TextFormat(null, 18, 0x000000, FontStyle.BOLD);
		setText("false");
		setCenter();
		addChild(_tf);
		
		this.mouseChildren = false;
		this.buttonMode = true;
		
		this.addEventListener(MouseEvent.CLICK, changeFlag);
	}
	
	private function changeFlag(e:MouseEvent):void 
	{
		if (_tf.text == "false") {
			setText("true");
		} else {
			setText("false");
		}
		dispatchEvent(new Event(FLAG_CHANGE,true));
		setCenter();
	}
	
	private function setCenter():void { 
		_tf.x = this.width / 2 - _tf.width / 2;
	}
	
	public function setText(param1:String):void {
		_tf.text = param1;
		setCenter();
	}
	
	public function get getText():String {
		return _tf.text;
	}
}