CustomEvent에서 event.preventDefault() 기능 구현하기

preventDefault() 메서드는 발생한 이벤트에 대하여 기본적으로 수행하게 되는 작업을 중지시키는 기능을 합니다. 예를 들면 TextBox에서는 키버튼 이벤트를 받아 텍스트를 보여주는 것이 키이벤트에 대한 TextBox의 Default 기능입니다. 자세한 내용은 도움말을 참조합시다.

이벤트 객체 도움말

보통 이벤트 리스너에서 다음과 같이 사용합니다.

 private function onTabClose(event:TabCloseEvent):void
{
    trace(this, "onTabClose");
    event.preventDefault();
    //event.stopImmediatePropagation();
}

preventDefault() 메서드가 이벤트 흐름을 제어할 수 있는 메서드라고 착각하기 쉬운데, 이 메서드는 이벤트 흐름에서 이벤트 객체의 진행 상태에 전혀 영향을 끼치지 않습니다. stopPropagation()이나 stopImmediatePropagation()메서드 같이 이벤트 흐름을 제어할 수 있는 메서드가 아니란 말입니다.

커스텀 컴포넌트에서도 isDefaultPrevented()메서드를 이용해 이 기능을 구현할 수 있습니다. 이 메서드는 이벤트 흐름상에서 preventDefault() 메서드가 한번이라도 호출되면 true값을 반환합니다. 다음은 탭네비게이션에서 탭버튼의 close버튼이 클릭되어 close이벤트가 발생될 때 기본동작을 기술하고, 더불어 preventDefault 기능을 지원하는 샘플코드입니다.

comp.addEventListener(Event.CLOSE, onTabClosed);
private function onTabClosed(event:Event):void
{
    var tab:TabButton = event.target as TabButton;
    if(tab){
        // 새로운 이벤트 발송
        var e:TabCloseEvent = new CustomEvent("newEventType", false, true);
        dispatchEvent(e);
        
        if(e.isDefaultPrevented()) return;
        
        // 여기가 Default로 실행되는 기본동작 코드
    }
}

새로운 이벤트에 대하여 preventDefault 기능을 지원하려면 이벤트 객체의 cancelable 속성을 true로 설정해야 합니다. 이렇게 하면 커스텀 컴포넌트에서 customEvent를 사용할 때 event.preventDefault()메서드를 사용하여 기본동작을 막을 수 있습니다.

private function onNewEventType (event:CustomEvent):void
{
    event.preventDefault();
}