본문 바로가기

Blog/Flex

실전 Event Bubble

B 컴포넌트를 가지고있는 A컴포넌트가 있을 때 마우스 동작에 의한 이벤트가 B에서 발생했다고 가정하고, A에서 이 이벤트를 등록하여 사용하고 싶을 때 보통 다음과 같은 구문을 A 클래스 내에 생성하게 됩니다

A 클래스 내부 : 

        B.addEventListener(eventType, onListener);
        
function onListener(event:Event):void
        {
            
dispatchEvent(event);
        }

클라이언트 : 

        A.addEventListener(eventType, onListener);
        
function onListener(event:Event):void
        {
            
trace("call", event.eventPhase);
        }

결과적으로 보면 위 구문은 "call"을 두번 출력하게 됩니다. 이유는 A에서 dispatch에 의한 이벤트 호출 한번, B에서 발생한 이벤트 버블링에 의한 이벤트 호출 한번, 해서 두번입니다. 클라이언트 메서드에서 이를 확인해 보면, eventPhase값이 한번은 2, 한번은 3이 출력되는 것을 확인 할 수 있습니다. 위 방법을 고수하면서 이벤트가 한번만 출력되게 하고 싶다면 다음과 같이 합니다.

A 클래스 내부 : 

        B.addEventListener(eventType, onListener);
        
function onListener(event:Event):void
        {
            
event.stopImmediatePropagation();
            
dispatchEvent(event);
        }

클라이언트 : 

        A.addEventListener(eventType, onListener);
        
function onListener(event:Event):void
        {
            
trace("call", event.eventPhase);
        }

이렇게 하면 클라이언트의 리스너에서 event.eventPhase값은 2가 됩니다. 다른 방법으로는 A 클래스에 있는 이벤트 등록과 dispatchEvent 발생 코드를 추가하지 않고 클라이언트에서만 등록하여 쓰는 경우입니다.

A 클래스 내부 :
코드 없음. 버블링에 의해 이벤트 전파됨.

클라이언트 : 

        A.addEventListener(eventType, onListener);
        
function onListener(event:Event):void
        {
            
trace("call", event.eventPhase);
        }

이때 eventPhase값은 3이됩니다. eventPhase값이 얼마인지가 중요한 것이 아니라 어떤 과정에 의한 이벤트 전파인지 아는 것이 중요합니다. 버블링에 의한 이벤트 전파를 알지 못하고 계속해서 컴포넌트를 하위로 확장시키다가는 이벤트 등록은 한번만 했는데 리스너가 여러 번 호출되는 황당한 경우가 생길 수 있으니 조심하시길…