Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)
jアプリケーションのバブルイベントとキャプチャイベントの処理
フレームワークでは、アプリケーションイベントの伝達のキャプチャフェーズ、バブルフェーズ、デフォルトフェーズがサポートされます。キャプチャフェーズとバブルフェーズは DOM の処理パターンと似ており、対象のコンポーネントがイベントに対応したり、場合によっては後続のハンドラの動作を制御したりできます。デフォルトフェーズでは、フレームワークの元の処理動作が保持されます。
デフォルトのイベント伝達ルール
デフォルトでは、コンテインメント階層のすべての親がキャプチャフェーズおよびバブルフェーズでイベントを処理できるわけではありません。代わりに、イベントはコンテインメント階層のすべての所有者に伝達されます。
コンポーネントの所有者は、その作成を行うコンポーネントです。宣言的に作成されたコンポーネントの場合、所有者はイベントの起動コンポーネントを参照するマークアップが含まれる、最も外側のコンポーネントになります。プログラムで作成されたコンポーネントの場合、所有者コンポーネントはそのコンポーネントを作成するために $A.createComponent を呼び出したコンポーネントになります。
イベント伝達の方向 (下) はバブルフェーズ (上) と反対になりますが、キャプチャフェーズにも同じルールが適用されます。
わかりやすく、バブルフェーズの例を使用して説明します。
c:owner には c:container が含まれ、さらにそこには c:eventSource が含まれます。
1<!--c:owner-->
2<aura:component>
3 <c:container>
4 <c:eventSource />
5 </c:container>
6</aura:component>c:eventSource がイベントを起動すると、このコンポーネント自体がイベントを処理します。次に、イベントはコンテインメント階層をバブルアップします。
c:container には c:eventSource が含まれますが、マークアップの最も外側のコンポーネントではないことが原因で所有者にはならないため、バブルイベントを処理できません。
c:owner は、c:container がそのマークアップ内にあるため、所有者です。c:owner はイベントを処理できます。
すべてのコンテナコンポーネントへの伝達
デフォルトの動作では、コンテインメント階層内のすべての親がイベントを処理できるわけではありません。他のコンポーネントが含まれているが、それらのコンポーネントの所有者ではないコンポーネントがあります。これらのコンポーネントは、コンテナコンポーネントと呼ばれます。この例の c:container は、c:eventSource の所有者でないため、コンテナコンポーネントになります。デフォルトでは、c:container は c:eventSource が起動したイベントを処理できません。
コンテナコンポーネントには、Aura.Component[] 型のファセット属性 (デフォルトの body 属性など) があります。コンテナコンポーネントには、定義で {!v.body} などの式が使用されているコンポーネントが含まれます。コンテナコンポーネントは、その式で表されるコンポーネントの所有者ではありません。
コンテナコンポーネントでイベントを処理できるようにするには、コンテナコンポーネントの <aura:handler> タグに includeFacets="true" を追加します。たとえば、includeFacets="true" をコンテナコンポーネント c:container のハンドラに追加すると、c:eventSource からバブルされたコンポーネントイベントを処理できるようになります。
1<aura:handler name="bubblingEvent" event="c:compEvent" action="{!c.handleBubbling}"
2 includeFacets="true" />バブルイベントを処理する
バブルフェーズのハンドラを追加するには、phase="bubble" を設定します。
1<aura:handler event="c:appEvent" action="{!c.handleBubbledEvent}"
2 phase="bubble" />event 属性では、処理するイベントを指定します。形式は namespace:eventName です。
<aura:handler> の action 属性は、イベントを処理するクライアント側コントローラのアクションを設定します。
キャプチャイベントを処理する
キャプチャフェーズのハンドラを追加するには、phase="capture" をせていします。
1<aura:handler event="c:appEvent" action="{!c.handleCapturedEvent}"
2 phase="capture" />イベント伝達を停止する
他のコンポーネントへのイベント伝達を停止するには、Event オブジェクトの stopPropagation() メソッドを使用します。