 |
|||
| Flex 2 개발 가이드 > Flex 프로그램 언어의 사용 > 이벤트의 사용 > 이벤트의 전파 | |||
|
|||
 |
|||
|
|||
이벤트의 전파
이벤트가 trigger 되면, Flex 는 3 개의 단계에서 event listener가 존재할지 어떨지를 확인합니다. 이러한 단계의 순서는 다음과 같이 되어 있습니다.
- 최초로 capther 단계
- 다음에 타겟 단계
- 마지막에 바브 링 단계
각 단계에 있어, 노드는 이벤트에 응답할 기회를 얻습니다. 예를 들어, 유저가, VBox 컨테이너내의 Button 컨트롤을 클릭했다고 합니다. capther 단계에서는, 루트 노드인 Application 오브젝트와 VBox 로, 이벤트를 처리하는 Listener가 있을지 어떨지가 확인됩니다. 다음의 타겟 단계에서는, Button 의 Listener가 trigger 됩니다. 바브 링 단계에서는, capther 단계와는 역의 VBox 가 앞, Application 오브젝트가 후라고 하는 순서로, 이벤트를 처리할 기회가 다시 주어집니다.
ActionScript 3.0 에서는, 타겟 노드 또는 이벤트 플로우(flow)의 임의의 노드로, event listener를 등록할 수가 있습니다. 다만, 모든 이벤트가, 이벤트 플로우(flow)의 3 개의 단계 모두로 처리되는 것은 아닙니다. 일부의 타입의 이벤트는 타겟 노드에 직접 송출(Dispatch)됩니다. 이 경우, capther 단계와 바브 링 단계는 스킵 됩니다. 그것이 최상정도 노드로부터 송출(Dispatch)된 것이 아닌 한, 어느 이벤트도 capther 할 수 있습니다.
다른 이벤트에서는, 표시 리스트에 없는 오브젝트가 대상이 되는 일이 있습니다. 예를 들어, Socket 클래스의 인스턴스에 송출(Dispatch)된 이벤트 등입니다. 이러한 이벤트 오브젝트는, capther 단계 또는 바브 링 단계를 거치지 않고 , 타겟 노드에 직접 플로우(flow) 합니다. 또, 이벤트가 이벤트 모델에 플로우(flow) 할 때에, 이벤트를 캔슬할 수도 있으므로, 다른 단계로 나아갈 예정의 이벤트를 정지할 수가 있습니다. 이것은 cancelable properties 가 true 로 설정되어 있는 경우만 가능합니다.
capther 및 바브 링은, Event 오브젝트가 표시 리스트의 노드간을 이동할 때에 실행됩니다. 부모로부터 아이로 이동하는 경우에는 capther가, 아이로부터 부모로 이동하는 경우에는 바브 링이 실행됩니다. 이 처리는 상속 계층과는 관계 없습니다. 타겟 단계에 가세해, capther 단계와 바브 링 단계도 경과할 수가 있는 것은,DisplayObject 오브젝트 (컨테이너나 컨트롤등의 비주얼 오브젝트) 뿐입니다.
마우스 이벤트 및 키보드 이벤트는, 바브 링 단계에서만 처리됩니다. capther는 어느 이벤트에서도 가능합니다만, 명시적으로 지정하지 않는 이상 DisplayObject 오브젝트는 capther 단계에서는 이벤트를 릿슨 하지 않습니다. 즉, 디폴트에서는 capther는 무효가 되어 있습니다.
Validator 와 같은 페이스레스이벤트디스팟체에 의해 이벤트가 송출(Dispatch)되면, 타겟 단계의 처리만이 실행됩니다. 이것은, Event 오브젝트에 capther 및 바브 링 대상의 비주얼 표시 리스트가 없기 때문입니다.
target properties 와 currentTarget properties 에 대해
어느 Event 오브젝트에도, Event 오브젝트가 전파 프로세스의 어느 단계에 있는지를 추적하기 위한 target properties 와 currentTarget properties 가 있습니다. target properties 는, 이벤트의 디스팻쳐를 참조합니다. currentTarget properties 는, event listener가 존재하고 있을지 어떨지가 현재 검사되고 있는 노드를 참조합니다.
어느 컴퍼넌트로 Listener를 기술해, MouseEvent.CLICK 등의 마우스 이벤트를 처리하는 경우,event.target properties 는 반드시 그 컴퍼넌트를 참조하지 않습니다. 대부분의 경우는, label를 정의하는 서브 컴퍼넌트 (Button 컨트롤의 UITextField 등)를 참조합니다.
Flash Player 는, 마우스 포인터아래에 있는 오브젝트 가운데, 맨 위에 있는 것으로부터 이벤트를 송출(Dispatch)합니다. 아이는 부모의 전면에 있기 (위해)때문에, Button 의 UITextField 등, 내부 서브 컴퍼넌트로부터 이벤트를 송출(Dispatch)하는 일도 있습니다.
event.target properties 는, 감시되고 있는 오브젝트 (대부분의 어플리케이션에서는 Button 컨트롤의 click 이벤트를 감시하고 있는)는 아니고, 이벤트를 송출(Dispatch)한 오브젝트 (이 경우는 UITextField)로 설정됩니다.
MouseEvent 이벤트는 친체인을 버블 올라가, 임의의 조상으로 처리할 수 있습니다. 이벤트가 버블 해도,event.target properties 의 값은 바뀌지 않습니다 (UITextField 인 채). 다만,event.currentTarget properties 의 값은, 각 레벨로, 이벤트를 처리하는 조상으로 설정됩니다. 최종적으로는,currentTarget 가 Button 가 되어, Button 컨트롤의 event listener가 이벤트를 처리합니다. 이 때문에,event.target properties 는 아니고, 다음과 같이 event.currentTarget properties 를 사용할 필요가 있습니다.
<mx:Button label="OK" click="trace(event.currentTarget.label) "/>
이 경우, Button 이벤트의 click event listener에서는,event.currentTarget properties 는 항상 Button 를 참조합니다. 그에 대한 event.target 는, 유저가 Button 컨트롤의 어디를 클릭했는지를 따라, Button 또는 그 UITextField 가 됩니다.
capther 단계
capther 단계에서는, 표시 리스트내의 이벤트의 조상을 검사해, 이벤트의 Listener로서 등록되어 있는지 어떤지를 확인합니다. 검사는 표시 리스트내의 루트 조상으로부터 시작되어, 타겟의 직접적인 조상까지 계속됩니다. 대부분의 경우, 루트 조상은 스테이지에서, 그 아래가 SystemManager, 한층 더 그 아래가 Application 오브젝트입니다.
예를 들어, Panel 컨테이너를 가지는 어플리케이션이 있어, Panel 컨테이너 속에 TitleWindow 컨테이너, 한층 더 TitleWindow 컨테이너 속에 Button 컨트롤이 포함되어 있는 경우, 그 구조는 다음과 같이 됩니다.
Application
Panel
TitleWindow
Button
Button 컨트롤의 click 이벤트에 대한 Listener가 존재해, capther가 유효한 경우, capther 단계에서는 다음의 순서가 실행됩니다.
- Application 컨테이너를 체크해, click event listener가 존재할지 어떨지를 확인한다
- Panel 컨테이너를 체크해, click event listener가 존재할지 어떨지를 확인한다
- TitleWindow 컨테이너를 체크해, click event listener가 존재할지 어떨지를 확인한다
capther 단계에서는, 현재 Listener가 불려 가고 있는 노드에 맞추어 Event 오브젝트의 currentTarget properties 의 값이 변경됩니다. target properties 는, 계속 이벤트의 디스팻쳐를 참조합니다.
디폴트에서는, 컨테이너는 capther 단계에서 받지 않습니다. use_capture 파라미터의 디폴트치는 false 입니다. capther 단계에서 Listener를 추가하려면 ,addEventListener() 메소드를 호출할 때에,use_capture 파라미터를 true 로 설정합니다. 다음에 예를 나타냅니다.
myPanel.addEventListener(MouseEvent.MOUSE_DOWN, clickHandler, true);
MXML 태그를 사용해 인 라인으로 event listener를 추가하면, 이 파라미터는 false 로 설정됩니다. 이 값은 재정의(override) 할 수 없습니다.
use_capture 파라미터를 true 로 설정했을 경우, 즉 이벤트가 capther 단계에서 전파 하는 경우에서도, 그 이벤트는 버블 가능합니다만, capther 단계의 Listener는 거기에 응답하지 않습니다. capther 단계와 바브 링 단계의 양쪽 모두로 이벤트를 처리하는 경우는,addEventListener() 를 2 회, 즉 use_capture 를 true 로 설정해 1 회로false 로 설정해 1 회 호출할 필요가 있습니다.
capther 단계가 사용되는 것은 거의 없습니다. 또 capther 단계를 사용하면, 계산 처리의 부하가 커집니다. capther와는 반대로, 바브 링은 빈번하게 실행됩니다.
타겟 단계
타겟 단계에서는, 이벤트 디스팻쳐의 Listener가 불려 갑니다. 표시 리스트상의 다른 노드에서는, event listener의 유무가 확인되지 않습니다. 타겟 단계에서는, Event 오브젝트의 currentTarget properties 와 target properties 의 값은 같습니다.
바브 링 단계
바브 링 단계에서는, 이벤트의 조상을 검사해, event listener가 존재할지 어떨지를 확인합니다. 검사는 디스팻쳐의 직접적인 조상으로부터 시작되어, 표시 리스트를 루트 조상까지 거슬러 올라갑니다. 이것은 capther 단계의 역입니다.
예를 들어, Panel 컨테이너를 가지는 어플리케이션이 있어, Panel 컨테이너 속에 TitleWindow 컨테이너, 한층 더 TitleWindow 컨테이너 속에 Button 컨트롤이 포함되어 있는 경우, 그 구조는 다음과 같이 됩니다.
Application
Panel
TitleWindow
Button
Button 컨트롤의 click 이벤트에 대한 Listener가 존재해, 바브 링이 유효한 경우, 바브 링 단계에서는 다음의 순서가 실행됩니다.
- TitleWindow 컨테이너를 체크해, click event listener가 존재할지 어떨지를 확인한다
- Panel 컨테이너를 체크해, click event listener가 존재할지 어떨지를 확인한다
- Application 컨테이너를 체크해, click event listener가 존재할지 어떨지를 확인한다
이벤트가 버블 하는 것은, 이벤트의 bubbles properties 가 true 로 설정되어 있는 경우만입니다. 버블 하는 이벤트로서는, 마우스 이벤트와 키보드 이벤트가 있습니다. 일반적으로, Flex 에 의해 송출(Dispatch)되는 고레벨의 이벤트는 버블 하지 않습니다. 버블 할 수 있는 이벤트에는 change,click,doubleClick,keyDown,keyUp,mouseDown,mouseUp 등이 있습니다. 특정의 이벤트가 버블 할지 어떨지를 확인하려면 , 「Adobe Flex 2 레퍼런스 가이드」의 이벤트의 항목을 참조해 주세요.
바브 링 단계에서는, 현재 Listener가 불려 가고 있는 노드에 맞추어 Event 오브젝트의 currentTarget properties 의 값이 변경됩니다. target properties 는, 계속 이벤트의 디스팻쳐를 참조합니다.
event listener가 불려 갈 때, 실제로는 표시 리스트의 하위의 오브젝트에 의해 Event 오브젝트가 송출(Dispatch)되는 경우가 있습니다. 이벤트를 송출(Dispatch)한 오브젝트 그 자체가 target 가 됩니다. 이벤트가 현재 버블 하고 있는 오브젝트가 currentTarget 가 됩니다. 그 때문에, event listener로 현재의 오브젝트를 참조할 때는, 일반적으로,target properties 는 아니고 currentTarget properties 를 사용합니다.
event listener는, 이벤트를 송출(Dispatch)하는 오브젝트에게만 등록할 수 있습니다. 예를 들어, Button 컨트롤이 그 중에 포함되어 있었다고 해도,click 이벤트를 릿슨 하기 위해서 Form 컨테이너를 등록할 수 없습니다. Form 컨테이너는 click 이벤트를 송출(Dispatch)하지 않기 때문입니다. 다만, Form 컨테이너는 mouseDown 이벤트를 송출(Dispatch)하기 위해(때문에), Form 컨테이너 태그로 mouseDown event listener를 추가하는 것은 가능합니다. 이렇게 하면, Button 컨트롤 또는 Form 컨테이너가 mouseDown 이벤트를 받을 때마다 event listener가 trigger 됩니다.
useCapture properties 를 true 로 설정했을 경우, 즉 이벤트가 capther 단계에서 전파 하는 경우는, 바브 링의 디폴트 설정에 관계없이, 그 이벤트는 버블 하지 않습니다. capther 단계와 바브 링 단계의 양쪽 모두로 이벤트를 처리하는 경우는,addEventListener() 를 2 회, 즉 useCapture 를 true 로 설정해 1 회로false 로 설정해 1 회 호출할 필요가 있습니다.
이벤트는, 표시 리스트의 조상의 친체인만을 버블 올라갑니다. 같은 컨테이너내에 포함되는 2 개의 Button 컨트롤등의 형제는, 서로의 이벤트에 영향을 주지 않습니다.
이벤트의 단계의 검출
Event 오브젝트의 eventPhase properties 를 사용해, 이벤트가 어느 단계에 있는지를 확인할 수 있습니다. 이 properties 에는, 다음의 정수의 어느쪽이든을 나타내는 정수가 포함되고 있습니다.
- 1 -- capther 단계 (
CAPTURING_PHASE) - 2 -- 타겟 단계 (
AT_TARGET) - 3 -- 바브 링 단계 (
BUBBLING_PHASE)
다음의 예에서는, 현재의 단계와 현재의 타겟 ID 가 표시됩니다.
private function determineState(event:MouseEvent) :void {
trace(event.eventPhase + ":" + event.currentTarget.id);
}
전파의 정지
각각의 단계에서 표시 리스트내의 이동을 정지하려면 , Event 오브젝트로 다음의 몇개의 메소드를 호출합니다.
Event 오브젝트의 이벤트 플로우(flow) 처리를 정지하려면 ,stopPropagation() 메소드 또는 stopImmediatePropagation() 메소드를 호출합니다. 이것들 2 개의 메소드는 거의 같습니다만, 현재의 노드의 나머지의 event listener를 실행할 수 있을지 어떨지라고 하는 점만이 다릅니다. stopPropagation() 메소드를 호출하면, Event 오브젝트는 다음의 노드로 이동하지 않게 됩니다만, 현재의 노드의 다른 event listener는 모두 실행됩니다.
stopImmediatePropagation() 메소드를 호출해도 Event 오브젝트는 다음의 노드로 이동하지 않게 됩니다만, 이 경우는 현재의 노드의 다른 event listener는 실행되지 않습니다.
다음의 예에서는, Panel 컨테이너 속에 TitleWindow 컨테이너를 작성해, 양쪽 모두의 컨테이너를 mouseDown 이벤트의 Listener로서 등록하고 있습니다. 그 결과, TitleWindow 컨테이너를 클릭했을 경우,stopImmediatePropagation() 메소드의 호출을 추가하지 않는 한,showAlert() 메소드가 2 회 불려 갑니다.
<? xml version="1. 0"? >
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
initialize="init(event) ">
<mx:Script><! [CDATA[
import mx.controls.Alert;
import flash.events.MouseEvent;
import mx.events.Event;
public function init(e:Event) {
p1.addEventListener(MouseEvent.MOUSE_DOWN, showAlert);
tw1.addEventListener(MouseEvent.MOUSE_DOWN, showAlert);
tw1.addEventListener(Event.CLOSE, closeWindow);
}
public function showAlert(e:Event) {
Alert.show("Alert! \n" + e.currentTarget + "\n" + e.eventPhase);
e.stopImmediatePropagation();
}
public function closeWindow(e:Event) {
p1.removeChild(tw1);
}
]]></mx:Script>
<mx:Panel id="p1" title="Panel 1">
<mx:TitleWindow id="tw1" width="300" height="300" showCloseButton="true"
title="Title Window 1">
<mx:Button label="Enter name"/>
<mx:TextArea id="ta1"/>
</mx:TitleWindow>
</mx:Panel>
</mx:Application>
례
다음의 예에서는, 타겟이 이벤트를 처리한 후, 부모 컨테이너의 click 핸들러에 의해, 타겟 컨트롤이 무효로 설정됩니다. 이 예는, 복수의 이벤트 (모든 클릭)로 1 살의 Listener (HBox 컨테이너의 클릭)의 논리를 재이용할 수 있는 것을 나타내고 있습니다.
<? xml version="1. 0"? >
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><! [CDATA[
public function disableControl(event:MouseEvent) :void {
event.currentTarget.enabled = false;
}
public function doSomething(event:MouseEvent) :void {
b1.label = "clicked";
ta1.text += "something wonderful happened";
}
public function doSomethingElse(event:MouseEvent) :void {
b2.label = "clicked";
ta1.text += "something wonderful happened again";
}
]]></mx:Script>
<mx:HBox height="50" click="disableControl(event) ">
<mx:Button id='b1' label="Click Me" click="doSomething(event) "/>
<mx:Button id='b2' label="Click Me" click="doSomethingElse(event) "/>
<mx:TextArea id="ta1"/>
</mx:HBox>
</mx:Application>
복수의 Listener (아이 컨트롤 마다 1 개씩)를 지정하는 대신에 친컨트롤로 1 살의 Listener를 지정하면, 코드의 행수가 줄어들어, 어플리케이션의 효율이 향상합니다. addEventListener() 메소드의 호출 회수가 줄어들면, 어플리케이션의 기동 시간이 짧아져, 메모리의 소비량도 적게 됩니다.
다음의 예에서는, 링크 마다 Listener를 등록하는 대신에, VBox 컨테이너에 대해서 1 개의 이벤트 핸들러를 등록하고 있습니다. VBox 컨테이너의 아이는 모두 이 이벤트 핸들러를 상속 받습니다. Flex 는 버블 이벤트의 핸들러를 호출하기 (위해)때문에,currentTarget properties 는 아니고 target properties 를 사용합니다. 이 핸들러에서는,currentTarget properties 는 VBox 컨트롤을 참조해,target properties 는 필요한 label를 가지는 LinkButton 컨트롤을 참조합니다.
<? xml version="1. 0"? >
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="createLinkListener() ">
<mx:Script><! [CDATA[
private function linkHandler(event:MouseEvent) :void {
var url:URLRequest = new URLRequest("http://finance.yahoo.com/q/
cq? d=v1&s=" + event.target.label);
navigateToURL(url);
}
private function createLinkListener() :void {
vb1.addEventListener(MouseEvent.CLICK, linkHandler);
}
]]></mx:Script>
<mx:VBox id="vb1">
<mx:LinkButton label="ADBE"/>
<mx:LinkButton label="GE"/>
<mx:LinkButton label="HD"/>
<mx:LinkButton label="IBM"/>
<mx:LinkButton label="INTC"/>
</mx:VBox>
</mx:Application>