[AS3] 이벤트 흐름

http://help.adobe.com/ko_KR/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7e4f.html


이벤트는 개념적으로 세 단계로 구분이 되는데, 각각 캡쳐, 타겟, 버블링 단계로 구분된다.

capture 단계	stage 에서 대상 노드의 부모까지의 모든 노드를 포함
target 단계	이벤트가 최종적으로 도달하는 대상(target)노드만 포함
bubbling 단계	대상노드의 부모에서 stage 로 돌아오면서 거치는 모든 노드를 포함

stage 가 가장 상위에 있는 상하구조로 보면 쉽다.

위 그림에서 Child1 Node 에 이벤트가 전달된다고 가정할 경우

capture 단계에 해당되는 노드는 Stage, Parent Node
target 단계에 해당되는 노드는 Child1 Node
bubbling 단계에 해당되는 노드는 Parent Node, Stage

가 된다.

package
{
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	
	public class Main extends Sprite
	{
		public function Main():void
		{
			var mov1:mov_1 = new mov_1();
			var mov2:mov_2 = new mov_2();
			
			addChild( mov1 );
			mov1.addChild( mov2 );
			
			// addEventListener 의 세번째 파라메터값이 true 일 경우, 캡쳐 단계에서만 동작.
			mov1.addEventListener( MouseEvent.CLICK, fn1 );
			mov2.addEventListener( MouseEvent.CLICK, fn2 );
			stage.addEventListener( MouseEvent.CLICK, fnStage );
		}
		
		private function fn1( e:MouseEvent ):void
		{
			trace( "mov1" );
		}
		private function fn2( e:MouseEvent ):void
		{
			trace( "mov2" );
		}
		private function fnStage( e:MouseEvent ):void
		{
			trace( "stage" );
		}		
	}
}

위 소스코드로 살펴보면

마우스이벤트는 기본적으로 bubble이 true 로 선택되어 있기 때문에
mov2 를 선택했을 경우 출력결과는

// mov2
// mov1
// stage

대상(target) 노드인 mov2 부터 mov2, mov1, stage 순으로 이벤트의 흐름이 일어난다.


addEventListener 의 세번째 인자인 userCapture(기본값은 false) 를 true 로 설정하면
mov1.addEventListener( MouseEvent.CLICK, fn1, true );

capture 단계에 mov1 의 동작이 일어난 후에 순차적으로 이벤트가 흘러가게되는데
출력결과는

// mov1
// mov2
// stage

순으로 일어나게 된다.


도움말 상에

이벤트 흐름을 따라 이벤트 리스너를 추가할 수 있는 기능은 사용자 인터페이스 구성 요소에 객체가 두 개 이상 포함되어 있는 경우에 유용합니다. 예를 들어, 버튼 객체에 버튼 레이블로 사용되는 텍스트 객체가 포함될 수 있습니다. 이벤트 흐름에 리스너를 추가하는 기능이 없는 경우 버튼에서 발생하는 모든 클릭 이벤트에 대한 알림을 받으려면 버튼 객체와 텍스트 객체 둘 다에 리스너를 추가해야 합니다. 그러나 이벤트 흐름 기능을 사용하면 텍스트 객체 또는 텍스트 객체에 의해 식별되는 버튼 객체 영역에서 발생하는 클릭 이벤트를 처리하는 단일 이벤트 리스너를 버튼 객체에 추가할 수 있습니다.