Component Events 02

 

 

 

 

Component Event Propagation

프레임워크는 컴포넌트 이벤트 전파를 위한 Capture, Bubble 단계를 지원.

프레임워크를 사용해 이벤트를 여러 단계에서 처리 O

단계를 통해 어플리케이션에 가장 적합한 이벤트 처리 방법을 유연하게 선택 O

 

Capture

이벤트가 캡쳐되어 어플리케이션 루트에서 소스 컴포넌트*로 유입됨

*Source component : 이벤트를 발생시키는 컴포넌트

이벤트는 캡처된 이벤트를 수신하는 containment hierarchy의 컴포넌트에 의해 처리될 수 O

이벤트 핸들러는 어플리케이션 루트부터 이벤트를 실행한 소스 컴포넌트까지 순서대로 호출됨

이 단계에서 등록된 핸들러는 이벤트 전파 중지 O, 핸들러는 더 이상 호출되지 않음

 

Bubble

이벤트를 발생시킨 컴포넌트가 처리할 수 O

그 후 이벤트는 소스 컴포넌트에서 어플리케이션 루트로 이동함

이벤트는 버블 이벤트를 수신하는 containment hierarchy의 컴포넌트에 의해 처리될 수 O

이벤트 핸들러는 이벤트를 어플리케이션 루트까지 실행한 소스 컴포넌트에서 순서대로 호출됨

이 단계에서 등록된 핸들러는 이벤트 전파 중지 O, 이 단계에서 핸들러는 더 이상 호출되지 않음

 

Component Event 전파 순서

1. 이벤트 발생
2. Capture 단계
   • 프레임워크는 모든 컴포넌트가 통과될 때까지 어플리케이션 루트에서 소스 컴포넌트로 캡처 단계 실행
   • 모든 핸들링 이벤트는 이벤트에 대한 stopPropagation( )을 호출하여 전파 중지 O
3. Bubble 단계
   • 프레임워크는 모든 컴포넌트가 통과되거나 stopPropagation( )이 호출될 때까지 소스 컴포넌트에서 어플리케이션 루트까지 버블 단계 실행

 

Component Event 예시

Component Event는 standard DOM event(마우스 클릭, 키 누르기...)의 복제

DOM 대응물과 마찬가지로, 버블링 메커니즘을 통해 컴포넌트 계층에서 위로 전파되며,

어플리케이션 루트 컴포넌트로 이동하는 도중에 중지될 수 O

 

1. Component E가 컴포넌트 이벤트 발생시킴

2. E의 직계 상위로 이벤트 버블 : Component D

3. Component D는 이벤트 처리 O, 선택적으로 이벤트 캡처하여 전파 방지 O

4. Component D가 이벤트를 캡처하지 않은 경우 A로 전파됨

    (D가 이벤트를 처리하지 않은 경우에도)

5. Component B&C는 E의 혈통이 아니기 때문에 Event 다루지 X

 

 

출처 : developer.salesforce.com - Developer's Blog

 

 

 

 

 

 

Handling Bubbled / Captured Component Events

이벤트 전파 규칙은 버블/캡처 단계에서 기본적으로 이벤트를 처리할 수 있는 containment hierarchy 구조의 컴포넌트를 결정

프레임워크는 컴포넌트 이벤트 전파를 위한 Capture & Bubble 단계 지원 (DOM 처리 패턴과 유사)

Capture → Bubble 순으로 실행

 

기본 Event Propagation Rules

기본적으로, containment hierarchy의 모든 상위 계층은 캡처&버블 단계에서 이벤트 처리 X

대신 이벤트는 containment hierarchy의 모든 owner에게 전파됨

 

컴포넌트의 owner = 컴포넌트 생성을 책임지는 컴포넌트

선언적으로 생성된 컴포넌트의 경우 owner는 이벤트를 발생시키는 컴포넌트를 참조하는 마크업을 포함하는 가장 바깥쪽 컴포넌트

(프로그래밍 방식으로 생성된 컴포넌트의 경우 ≫ $A.createComponent를 호출하여 생성한 컴포넌트)

 

Bubbling Phase :

<!-- c:owner -->
//c:owner는 c:container, c:eventSource를 포함함
<aura:component>  
    <c:container>
    	<c:eventSource />
    </c:container>
</aura:component>

˙c:eventSource가 이벤트를 발생시키면, 스스로 이벤트 처리 O

    그 후 이벤트가 containment hierarchy를 타고 버블링 하며 올라감

 

˙c:container가 c:eventSource를 포함하고 있기는 하지만, owner는 아님!

    마크업에서 가장 바깥 쪽에 있는 컴포넌트가 owner이기 때문에 c:container는 이벤트 처리 X

 

˙c:owner는 이벤트 처리 O

 

모든 Container Component에 전파

기본 동작으로 인해 containment hierarchy의 모든 상위 항목이 이벤트를 처리할 수는 X

일부 컴포넌트는 다른 컴포넌트를 포함하지만, 해당 컴포넌트의 owner는 아닌 경우

=≫ Container Component

위의 예에서 c:container는 c:eventSource의 owner가 아니므로 ≫ Container Component

 

Container Component에는 기본 body attribute와 같은 Aura.Component [] 타입의 facet attribute를 가지고 있음

그 Container component는 {!v.body}와 같은 식을 사용하는 컴포넌트가 정의에 포함됨

Container component는 해당 식과 함께 렌더링 된 컴포넌트의 owner가 아님

 

Container component가 이벤트를 처리할 수 있도록 하려면 컴포넌트의 <aura:handler>에 includeFacets="true"를 추가하기!

includeFacets="true"를 Container component의 핸들러에 추가하면, c:eventSource에서 버블 된 컴포넌트 이벤트 처리 O

<aura:handler name="bubblingEvent" event="c:compEvent" action="{!c.handleBubbling}"
 includeFacets="true" />

 

Handle Bubbled Event

컴포넌트 이벤트를 발생시키는 컴포넌트는 <aura:registerEvent> 태그를 사용해 이벤트를 발생시키도록 등록

<aura:component>
    <aura:registerEvent name="compEvent" type="c:compEvent" />
</aura:component>

Bubble 단계에서 이벤트를 처리하는 컴포넌트는 <aura:handler> 태그를 사용해 client 측 컨트롤러에 처리 작업을 할당

<aura:component>
    <aura:handler name="compEvent" event="c:compEvent" action="{!c.handleBubbling}" />
</aura:component>

※ <aura:handler>에서 name attribute는 이벤트를 발생시키는 컴포넌트인 <aura:registerEvent> 태그에 있는 name attribute와 매치되어야 함!!

 

Handle Captured Event

Capture 단계에서 이벤트를 처리하는 컴포넌트는 <aura:handler> 태그를 사용해 client측 컨트롤러에 처리 작업을 할당

<aura:component>
    <aura:handler name="compEvent" event="c:compEvent" action="{!c.handleCapture}"
     phase="capture" />
</aura:component>

phase attribute가 세팅되어있지 않으면, 컴포넌트 이벤트의 기본 처리 단계는 Bubble!!

 

Get the Source of an Event

<aura:handler> 태그에 대한 client 측 컨트롤러 동작에서 evt.getSource( )를 사용해 이벤트를 발생시킨 컴포넌트 확인 O

Source component 검색하기 ≫ evt.getSource( ).getElement( )

(여기서 evt는 event 참조함!)

 

Event Propagation 멈추기

다른 컴포넌트로 이벤트가 전파되는 것을 막으려면 Event object에  stopPropagation( ) 메소드 사용하기

 

비동기식 코드 실행에서 Event Propagation 일시 중지

event.pause( ) 를 사용해 event.resume( ) 가 호출될 때까지 이벤트 처리&전파 일시 중지

Capture/Bubble 단계에서 pause( ) 또는 resume( ) 호출 O

 

 

 

 

 

 

 

참조 : Lightning Aura Components Developer Guide

1. Component Event Propagation

2. Handling Bubbled or Captured Component Events

3. Handling Component Events