Component Events 01

 

Handling Component Events

Component event는 이벤트를 발생시킨 component,
또는 이벤트를 수신하는 Containment hierarchy에 의해 처리될 수 있음

 

 

 

 

 

<aura:handler>

Syntax

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

Note

˙ <aura:handler> 에 있는 name attribute는 이벤트를 발생시키는 컴포넌트의 <aura:registerEvent> 태그에 있는 name attribute와 같아야 함

˙ <aura:handler>의 action attribute는 이벤트를 처리할 client측 컨트롤러 동작을 설정

˙ event attribute : 처리중인 이벤트를 지정 ( format ☞ namespace:eventName )

˙ 이벤트가 발생하면, handleComponentEvent client측 컨트롤러 action이 호출됨

 

 

Event Handling Phases

Component event handler는 기본적으로 bubble phase.

대신 capute phase를 handler에 추가하고 싶으면, phase attribute 사용

<aura handler name="sampleComponentEvent" event="ns:eventName"
    action="{!c.handleComponentEvent}" phase="capture" />

 

 

Event의 발생지 찾기

event.getSource( )

: <aura:handler> 태그에 대한 client측 컨트롤러 action에서 어떤 component가 이벤트를 발생시켰는지 찾을 수 O

event.getSource( ).getElement( ) 

: source 요소를 검색하기

 

 

 

 

Component Handling Its Own Event

컴포넌트는 마크업에서 <aura:handler> 태그를 사용해 자체 이벤트를 처리할 수 있음

<aura:handler>의 action attribute는 이벤트를 처리할 client측 컨트롤러 동작을 설정

//event를 발생시키는 component
<aura:registerEvent name="sampleEvt" type="c:compEvt" />

//event를 받는 component
<aura:handler name="sampleEvt" event="c:compEvt"
    action="{!c.handleSampleEvt}" />

 

 

 

 

 

 

 

 

출처 : Lightning Aura Components Developer Guide

Handling Component Events | Lightning Aura Components Developer Guide | Salesforce Developers