Lightning コンポーネント開発者ガイド
jコンポーネントへのイベントハンドラの動的な追加
コンポーネントから起動されるイベントのハンドラを動的に追加できます。
Component コンポーネントの addEventHandler() メソッドは、廃止された addHandler() メソッドの代わりに使用されます。
コンポーネントにイベントハンドラを動的に追加するには、addEventHandler() メソッドを使用します。
1addEventHandler(String event, Function handler, String phase, String includeFacets)- event
- 最初の引数は、ハンドラをトリガするイベントの名前です。コンポーネントから起動しないイベントの起動開始をコンポーネントに強制することはできないため、コンポーネントから起動するイベントに、この引数が対応することを確認してください。コンポーネントのマークアップの <aura:registerEvent> タグにより、コンポーネントから起動するイベントが公開されます。
- コンポーネントイベントの場合、<aura:registerEvent> タグの name 属性と一致するようにこの引数を設定します。
- アプリケーションイベントの場合、namespace:eventName 形式のイベント記述子と一致するようにこの引数を設定します。
- handler
- 2 つ目の引数は、イベントを処理するアクションです。ハンドラをマークアップで静的に定義した場合、<aura:handler> タグの action 属性に指定する値と似ています。この引数には 2 つのオプションがあります。
- コントローラアクションを使用するには、cmp.getReference("c.actionName") 形式を使用します。
- 匿名関数を使用するには、次の形式を使用します。
1function(auraEvent) { 2 // handling logic here 3}
その他の引数の説明については、ドキュメント参照アプリケーションの JavaScript API を参照してください。
$A.createComponent() のコールバック関数で動的に作成されたコンポーネントにイベントハンドラを追加することもできます。詳細は、「コンポーネントの動的な作成」を参照してください。
例
次のコンポーネントには、コンポーネントイベントとアプリケーションイベントを起動および処理するボタンがあります。
1<!--c:dynamicHandler-->
2<aura:component >
3 <aura:registerEvent name="compEvent" type="c:sampleEvent"/>
4 <aura:registerEvent name="appEvent" type="c:appEvent"/>
5 <h1>Add dynamic handler for event</h1>
6 <p>
7 <lightning:button label="Fire component event" onclick="{!c.fireEvent}" />
8 <lightning:button label="Add dynamic event handler for component event" onclick="{!c.addEventHandler}" />
9 </p>
10 <p>
11 <lightning:button label="Fire application event" onclick="{!c.fireAppEvent}" />
12 <lightning:button label="Add dynamic event handler for application event" onclick="{!c.addAppEventHandler}" />
13 </p>
14
15</aura:component>クライアント側コントローラを次に示します。
1/* dynamicHandlerController.js */
2({
3 fireEvent : function(cmp, event) {
4 // Get the component event by using the
5 // name value from <aura:registerEvent> tag
6 var compEvent = cmp.getEvent("compEvent");
7 compEvent.fire();
8 console.log("Fired a component event");
9 },
10
11 addEventHandler : function(cmp, event) {
12 // First param matches name attribute in <aura:registerEvent> tag
13 cmp.addEventHandler("compEvent", cmp.getReference("c.handleEvent"));
14 console.log("Added handler for component event");
15 },
16
17 handleEvent : function(cmp, event) {
18 alert("Handled the component event");
19 },
20
21 fireAppEvent : function(cmp, event) {
22 var appEvent = $A.get("e.c:appEvent");
23 appEvent.fire();
24 console.log("Fired an application event");
25 },
26
27 addAppEventHandler : function(cmp, event) {
28 // Can use cmp.getReference() or anonymous function for handler
29 // First param is event descriptor, "c:appEvent", for application events
30 cmp.addEventHandler("c:appEvent", cmp.getReference("c.handleAppEvent"));
31 // Can alternatively use anonymous function for handler
32 //cmp.addEventHandler("c:appEvent", function(auraEvent) {
33 // console.log("Handled the application event in anonymous function");
34 //});
35 console.log("Added handler for application event");
36 },
37
38 handleAppEvent : function(cmp, event) {
39 alert("Handled the application event");
40 }
41})addEventHandler() コールの最初のパラメータに注目します。コンポーネントイベントの構文は次のようになっています。
1cmp.addEventHandler("compEvent", cmp.getReference("c.handleEvent"));アプリケーションイベントの構文は次のようになっています。
1cmp.addEventHandler("c:appEvent", cmp.getReference("c.handleAppEvent"));コンポーネントイベントまたはアプリケーションイベントでは、コントローラアクションの cmp.getReference() を使用する代わりに、匿名関数をハンドラとして使用できます。
たとえば、アプリケーションイベントハンドラは次のようになります。
1cmp.addEventHandler("c:appEvent", function(auraEvent) {
2 // add handler logic here
3 console.log("Handled the application event in anonymous function");
4});