コンポーネントイベント

カスタムコンポーネントイベントを作成する

カスタムコンポーネントイベントは、.evt リソースの <aura:event> タグを使用して作成できます。イベントには、そのイベントの起動前に設定可能で、処理時に読み取り可能な属性を含められます。

コンポーネントイベントの場合は、<aura:event> タグに type="COMPONENT" を使用します。たとえば、次のコンポーネントイベントには message 属性が 1 つ設定されています。

1<aura:event type="COMPONENT">
2    <!-- add aura:attribute tags to define event shape.
3      One sample attribute here -->
4    <aura:attribute name="message" type="String"/>
5</aura:event>

イベントを処理するコンポーネントは、イベントデータを取得できます。このイベントの属性を取得するには、ハンドラのクライアント側コントローラで event.getParam("message") をコールします。

コンポーネントイベントを登録する

コンポーネントは、マークアップに <aura:registerEvent> を使用して、イベントを起動できるように登録します。次に例を示します。

1<aura:registerEvent name="sampleComponentEvent" type="auradocs:compEvent"/>

ここでは、イベントを起動して処理する場合に name 属性の値がどのように使用されるかを確認します。

コンポーネントイベントを起動する

JavaScript でコンポーネントイベントへの参照を取得するには、getEvent("evtName") を使用します。この evtName は、<aura:registerEvent> の name 属性と一致します。fire() を使用して、コンポーネントのインスタンスからイベントを起動します。たとえば、クライアント側コントローラの次のアクション関数でイベントを起動します。

1var compEvent = cmp.getEvent("sampleComponentEvent");
2// set some data for the event (also known as event shape)
3// compEvent.setParams(...);
4compEvent.fire();

それ自体のイベントを処理するコンポーネント

コンポーネントは、マークアップの aura:handler タグを使用して、それ自体のイベントを処理できます。

<aura:handler> の action 属性は、イベントを処理するクライアント側コントローラのアクションを設定します。次に例を示します。

1<aura:registerEvent name="sampleComponentEvent" type="auradocs:compEvent"/>
2<aura:handler name="sampleComponentEvent" action="{!c.handleSampleEvent}"/>

インスタンス化されたコンポーネントのコンポーネントイベントを処理する

イベントを登録するコンポーネントは、イベントの name 属性を宣言します。たとえば、<auradocs:eventsNotifier> コンポーネントには、<aura:registerEvent> タグが含まれます。

1<aura:registerEvent name="sampleComponentEvent" type="auradocs:compEvent"/>

<auradocs:eventsNotifier> を別のコンポーネントでインスタンス化するときは、<aura:registerEvent> タグの name 属性の値を使用してハンドラを登録します。たとえば、<auradocs:eventsHandler> コンポーネントのマークアップに <auradocs:eventsNotifier> が含まれる場合は、eventsHandler が eventsNotifier をインスタンス化し、eventsNotifier が生成したすべてのイベントを処理できます。<auradocs:eventsHandler> が <auradocs:eventsNotifier> をインスタンス化する方法を次に示します。

1<auradocs:eventsNotifier sampleComponentEvent="{!c.handleComponentEventFired}"/>

sampleComponentEvent は、<auradocs:eventsNotifier> にある <aura:registerEvent> タグの name 属性の値と一致します。

コンポーネントイベントを動的に処理する

コンポーネントには、JavaScript を使用してハンドラを動的にバインドできます。この方法は、コンポーネントがクライアント側で JavaScript を使用して作成されている場合に役立ちます。「イベントハンドラの動的な追加」を参照してください。

コンポーネントイベントのソースを取得する

JavaScript の evt.getSource() を使用して、どのコンポーネントがコンポーネントイベントを起動したかを確認します。この evt はイベントへの参照です。