[ActionScript] event 전파 방지 - stopPropagation() 과 stopImmediatePropagation() 의 차이

새롭게 시작하는 플래시 CS3 (대림출판사. 윤훈남 지음) 책을 보다가 잘못된 점이 있었다.

p154~p155  에 보면 stopPropagation()에 대한 설명에서...

stopPropagation()은 다음 Node로 옮기도록 한다고 했습니다. 하지만 stage는 Node가 아니라고 했습니다. 따라서 두 개의 이벤트만 발생합니다. stage가 Node라면 3개가 호출되어야 합니다. 하지만 Node가 아니기 때문에 곧바로 종료하는 효과가 나오게 됩니다.

유사한 stopImmediatePropagation() 함수는 stopPropagation()과 비슷합니다. 다만 차이점은 이벤트 흐름 자체를 즉시 중지시킵니다. 따라서 stopPropagation()은 현재 Node 상에서 흐름 제어를 막는 것에 비해서, stopImmediatePropagation()은 현재 Event Listener를 벗어나가는 순간 이벤트 흐름을 종료해 버립니다. 하지만 우리가 작성한 샘플에서는 stage가 Node가 아님으로 동일한 결과를 출력합니다.

책의 예제에서는 stage에 버튼을 바로 붙여서 trace로 검증이 안되서, 다음 코드처럼 Sprite 를 동적으로 생성해서, outer Sprite 객체를 만들고, 그 자식으로 Inner Sprite 객체를 붙이고, 거기에 버튼을 만들어서 붙이고, 이벤트 릿스너를 캡처 단계와 버블 단계에 모두 등록해서 stopProgation()을 했을 때와 stopImmediatePropagation()을 했을 때의 차이점을 알아보고자 한다.

import flash.display.Sprite;
import fl.controls.Button;

var outer:Sprite = new Sprite();
draw(outer, 0x00FF00, 200);
stage.addChild(outer);

var inner:Sprite = new Sprite();
draw(inner, 0x0000FF, 100);
outer.addChild(inner);

var button:fl.controls.Button = new fl.controls.Button();
button.width = 50;
button.height = 50;
button.name = "pp";
button.label = "click";
inner.addChild(button);

button.addEventListener(MouseEvent.CLICK,fnC,true);
outer.addEventListener(MouseEvent.CLICK,fnOuterC,true);
inner.addEventListener(MouseEvent.CLICK,fnInnerC,true);
stage.addEventListener(MouseEvent.CLICK,fnstageC,true);

button.addEventListener(MouseEvent.CLICK,fnB1);
button.addEventListener(MouseEvent.CLICK,fnB2);
button.addEventListener(MouseEvent.CLICK,fnB3);
outer.addEventListener(MouseEvent.CLICK,fnOuterB);
inner.addEventListener(MouseEvent.CLICK,fnInnerB);
stage.addEventListener(MouseEvent.CLICK,fnstageB);

function draw(sprite:Sprite, bgColor:uint, size:uint):void {
	sprite.graphics.beginFill(bgColor);
	sprite.graphics.drawRect(0,0,size,size);
	sprite.graphics.endFill();
}

function fnOuterC(e:MouseEvent):void { 	trace("Capture Outer::"); }
function fnInnerC(e:MouseEvent):void { 	trace("Capture Inner::"); }
function fnOuterB(e:MouseEvent):void { 	trace("Bubble Outer::"); }
function fnInnerB(e:MouseEvent):void { 	trace("Bubble Inner::"); }

function fnB1(e:MouseEvent):void
{
	e.stopImmediatePropagation();
	//e.stopPropagation();
	trace("Bubble_1 Button::");
}

function fnB2(e:MouseEvent):void
{
	trace("Bubble_2 Button::");
}

function fnB3(e:MouseEvent):void
{
	trace("Bubble_3 Button::");
}

function fnstageB(e:MouseEvent):void
{
	trace("Bubble Stage::");
}

function fnC(e:MouseEvent):void
{
	trace("Capture Button::");
}

function fnstageC(e:MouseEvent):void
{
	trace("Capture Stage::");
}

[Adobe Flash CS3 Professional 에서 코드를 로드한 화면]

[소스 코드]

eventPhase_1.fla

[Adobe Flash CS3 Professional 에서 실행시킨 화면]

 

function fnB1()에서 e.stopPropagation(); 이나 e.stopImmediatePropagation(); 코드가 없을 때

Capture Stage::
Capture Outer::
Capture Inner::
Bubble_1 Button::
Bubble_2 Button::
Bubble_3 Button::
Bubble Inner::
Bubble Outer::
Bubble Stage::

책대로라면 function fnB1()에서 e.stopPropagation(); 코드가 있을 때 다음과 같이 나와야 하지만, (다음 노드로 옮겨간다면)

Capture Stage::
Capture Outer::
Capture Inner::
Bubble_1 Button::
Bubble Inner::
Bubble Outer::
Bubble Stage::

실제로는 다음과 같이 나온다.

Capture Stage::
Capture Outer::
Capture Inner::
Bubble_1 Button::
Bubble_2 Button::
Bubble_3 Button::

function fnB1()에서 e.stopImmediatePropagation(); 코드가 있을 때

Capture Stage::
Capture Outer::
Capture Inner::
Bubble_1 Button::

---

결국 stopPropagation()은 현재 노드에 등록된 이벤트 릿스너를 모두 실행한 다음에 다음 노드로 넘어가지 않고, 이벤트 전파를 중지시키는 것이고, stopImmediatePropagation()은 현재 노드에 등록된 이벤트 릿스너도 실행시키지 않고, 바로 이벤트 전파를 멈추는 것이라고 할 수 있다.

아마도 저자가 착각을 한 것 같은데, 이 부분에 오류가 있었지만, 그렇다고 책 내용이 나쁘거나 수준이 떨어지는 것은 아니다. 참고할 만한 좋은 글이 많이 있고, 이벤트 전파 방지에 대해서는 오류가 있었지만 그래도 예제를 들어가면서 더 생각해 볼 거리를 제공해 준 것도 훌륭하다고 생각한다.