コンポーネントイベントバブル

イベントバブルルール

コンポーネントイベントは、コンテインメント階層内のすべての親が処理できるわけではありません。代わりに、コンテインメント階層内のすべてのファセット値プロバイダにバブルします。ファセット値プロバイダとは、イベントの起動コンポーネントを参照するマークアップが含まれる、最も外側のコンポーネントのことです。わかりやすく、例を使用して説明します。

c:eventBubblingParent には c:eventBubblingChild が含まれ、さらにそこには c:eventBubblingGrandchild が含まれます。

1<!--c:eventBubblingParent-->
2<aura:component>
3    <c:eventBubblingChild>
4        <c:eventBubblingGrandchild />
5    </c:eventBubblingChild>
6</aura:component>

c:eventBubblingGrandchild がコンポーネントイベントを起動すると、このコンポーネント自体がイベントを処理します。次に、イベントはコンテインメント階層をバブルアップします。c:eventBubblingChild には c:eventBubblingGrandchild が含まれますが、マークアップの最も外側のコンポーネントではないことが原因でファセット値プロバイダにはならないため、バブルイベントを処理できません。c:eventBubblingParent は、 c:eventBubblingChild がそのマークアップ内にあるため、ファセット値プロバイダです。c:eventBubblingParent はイベントを処理できます。

バブルイベントを処理する

1<aura:component>
2    <aura:registerEvent name="bubblingEvent" type="c:compEvent" />
3</aura:component>

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

イベントバブルの例

自分でいろいろと試せるように、この例のコード全体に目を通しましょう。

最初に、単純なコンポーネントイベントを定義します。

1<!--c:compEvent-->
2<aura:event type="COMPONENT">
3    <!--simple event with no attributes-->
4</aura:event>

c:eventBubblingEmitter は、c:compEvent を起動するコンポーネントです。

1<!--c:eventBubblingEmitter-->
2<aura:component>
3    <aura:registerEvent name="bubblingEvent" type="c:compEvent" />
4    <ui:button press="{!c.fireEvent}" label="Start Bubbling"/>
5</aura:component>

c:eventBubblingEmitter のコントローラは次のようになります。ボタンをクリックすると、マークアップに登録された bubblingEvent イベントが起動します。

1/*eventBubblingEmitterController.js*/
2{
3    fireEvent : function(cmp) {
4        var cmpEvent = cmp.getEvent("bubblingEvent");
5        cmpEvent.fire();
6    }
7}

c:eventBubblingGrandchild には c:eventBubblingEmitter が含まれ、<aura:handler> を使用してイベントのハンドラを割り当てます。

1<!--c:eventBubblingGrandchild-->
2<aura:component>
3    <aura:handler name="bubblingEvent" event="c:compEvent" action="{!c.handleBubbling}"/>
4
5    <div class="grandchild">
6        <c:eventBubblingEmitter />
7    </div>
8</aura:component>

c:eventBubblingGrandchild のコントローラは次のようになります。

1/*eventBubblingGrandchildController.js*/
2{
3    handleBubbling : function(component, event) {
4        console.log("Grandchild handler for " + event.getName());
5    }
6}

ハンドラがコールされると、コントローラはイベント名をログに記録します。

c:eventBubblingChild のマークアップは次のようになります。c:eventBubblingGrandchild は、この例で後から c:eventBubblingParent を作成するときに c:eventBubblingChild のボディとして渡します。

1<!--c:eventBubblingChild-->
2<aura:component>
3    <aura:handler name="bubblingEvent" event="c:compEvent" action="{!c.handleBubbling}"/>
4
5    <div class="child">
6        {!v.body}
7    </div>
8</aura:component>

c:eventBubblingChild のコントローラは次のようになります。

1/*eventBubblingChildController.js*/
2{
3    handleBubbling : function(component, event) {
4        console.log("Child handler for " + event.getName());
5    }
6}

c:eventBubblingParent には c:eventBubblingChild が含まれ、さらにそこには c:eventBubblingGrandchild が含まれます。

1<!--c:eventBubblingParent-->
2<aura:component>
3    <aura:handler name="bubblingEvent" event="c:compEvent" action="{!c.handleBubbling}"/>
4    
5    <div class="parent">
6        <c:eventBubblingChild>
7            <c:eventBubblingGrandchild />
8        </c:eventBubblingChild>
9    </div>
10</aura:component>

c:eventBubblingParent のコントローラは次のようになります。

1/*eventBubblingParentController.js*/
2{
3    handleBubbling : function(component, event) {
4        console.log("Parent handler for " + event.getName());
5    }
6}

次に、コードを実行したらどうなるか確認しましょう。

1. ブラウザで、c:eventBubblingParent に移動します。<c:eventBubblingParent /> が含まれる .app リソースを作成します。
2. c:eventBubblingEmitter のマークアップに含まれる [バブルを開始] ボタンをクリックします。
3. ブラウザのコンソールで出力を確認します。
   1Grandchild handler for bubblingEvent
   2Parent handler for bubblingEvent

c:compEvent イベントは、コンテインメント階層のファセット値プロバイダである c:eventBubblingGrandchild および c:eventBubblingParent にバブルされます。イベントが c:eventBubblingChild によって処理されることはありません。c:eventBubblingChild は c:eventBubblingParent のマークアップに含まれますが、そのマークアップの最も外側にあるコンポーネントではないためにファセット値プロバイダにならないからです。

イベント伝達を停止する

他のコンポーネントへのイベントバブルを停止するには、Event オブジェクトの stopPropagation() メソッドを使用します。

たとえば、伝達を停止するには c:eventBubblingGrandchild のコントローラを編集します。

1/*eventBubblingGrandchildController.js*/
2{
3    handleBubbling : function(component, event) {
4        console.log("Grandchild handler for " + event.getName());
5        event.stopPropagation();
6    }
7}

次に、c:eventBubblingParent に移動して、[バブルを開始] ボタンをクリックします。

ブラウザのコンソールで出力を確認します。

1Grandchild handler for bubblingEvent

イベントは c:eventBubblingParent コンポーネントにバブルアップされなくなりました。