Lightningコンポーネント (イベント)

##受信するイベント
特定のイベント時の処理を実装するために使用する。actionにはイベントハンドラをセットする。

####コンポーネントの初期化イベント
コントローラ側のinitメソッドをコンポーネントロード時に呼び出す

<aura:handler name="init" value="{!this}" action="{!c.init}" />

初期化イベント

####属性変更時のイベント
コンポーネントの初期化メソッドは最初の1回しか呼ばれないため、属性が変更された時に再度特定の処理を行いたい場合は、このイベントを使用する（valueに監視する属性をセット）

<aura:handler name="change" value="{!v.data}" action="{!c.valueChanged}" />

aura:valueChange

####コンポーネント再表示時のイベント
コンポーネントが再表示されたタイミング（自分自身のDOMが更新されたタイミング）で特定の処理を行いたい場合は、このイベントを使用する

<aura:handler name="render" value="{!this}" action="{!c.onRender}" />

aura:valueRender

##送信するイベント
Lightning処理系に特定の処理を依頼するために使用する。

####画面の再表示リクエスト
データの更新によりコンポーネントの再表示が必要な場合に発生するプラットフォームの標準イベント

<aura:handler event="force:refreshView" action="{!c.doInit}" />

####オブジェクトの詳細画面を表示
特定レコードの詳細画面を表示。

var sObectEvent = $A.get("e.force:navigateToSObject");
  sObectEvent.setParams({
    "recordId": '00Pxxxxxxxxxxxxxxx',
    "slideDevName": "detail"
});

####関連リストを表示
relatedListIdには子リレーション名を指定

var relatedListEvent = $A.get("e.force:navigateToRelatedList");
    relatedListEvent.setParams({
      "relatedListId": 'customObject__r',
      "parentRecordId": cmp.get("v.recordId")
});
relatedListEvent.fire();

##コンポーネント独自のイベント
####コンポーネントのイベント処理

コンポーネント側
change属性にコントローラ・メソッドを指定する(c.xxxx xxxxはメソッド名)

<ui:inputSelect value="{!v.value}" multiple="false" change="{!c.valueChanged}" aura:id="inputData">
<ui:inputTextArea value="{!v.value}" change="{!c.valueChanged}" aura:id="inputData"/>
<ui:inputText value="{!v.value}" maxlength="{!v.data.length}" size="{!v.data.inputBoxSize}" 

コントローラ側
Lightningコンポーネントが発行したイベントでは、event.getSource()を使ってコンポーネントへの参照を取得できる。

"valueChanged":function(cmp, event, helper) {
    var target = event.getSource();
    //コンポーネントの属性値を取得（v.value, v.label等）
    var newValue = target.get('v.value'); 
    ・・・・
}

####クリックされたボタンの種別を判定する event.getSource().getLocalId()

var action;
var buttonId = event.getSource().getLocalId();
switch(buttonId) {
    case 'aaaa':
        action = cmp.get("c.aaaa1");
        break;
    case 'bbbb':
        action = cmp.get("c.bbbb1");
        break;
    default:
        return;
}

####ノードイベントの処理
Lightningコンポーネントではなく、通常のINPUTタグ等で発生したイベントの場合は getSource()は使えない

コンポーネント側
イベントハンドラはonXXにコントローラ・メソッドを指定する(c.xxxx xxxxはメソッド名)

<input type="checkbox" name="checkbox" onchange="{!c.valueChanged}" />

コントローラ側
event.targetを使ってイベントを発生したノードへの参照を取得できる。
event.currentTargetはイベントが発生したノードではなく、イベントハンドラ(onclick等）を定義したノードへの参照が戻る。

"valueChanged":function(cmp, event, helper) {
    //値の取得
    var value = event.target.value;
    //チェックボックスのON/OFFを判定
    if (event.target.checked){
        ....
    }else{
        ....
    }
    //属性値の取得
    event.target.getAttribute('xxxx');
    //currentTargetはイベントハンドラを定義したノードの参照
    // <div onclick="{!c.valueChanged}" data-comment="xx">  <- currentTarget
    //   <img src="xxx">                  <- target
    var divnode = event.currentTarget;
    var comment = event.currentTarget.dataset.comment;  //data-xxxの取得
},

####カスタムイベント（コンポーネントイベント）
コンポーネントイベントは、階層構造の子供から親に向けてイベントを発行する場合に使用する。

Lightningイベント

<aura:event type="COMPONENT" description="fire when rows is added or deleted" >
    <aura:attribute name="type" type="String" default="ListChanged" />
   ....
</aura:event>

イベントの発行（子側）

//typeにはLightningイベントの名前、nameには任意の名前を設定
<aura:registerEvent name="openSearchDialogEvent" type="c:XXX_Event_OpenSearchDialog"/>

var compEvent = cmp.getEvent("openSearchDialogEvent");
compEvent.setParams({'type' : compEvent.getName()});
...
compEvent.fire();

イベントのキャプチャ（親側）

nameには発行側で指定したものと同じ名前、eventにはLightningイベントの名前を設定
<aura:handler name="openSearchDialogEvent" event="c:XXX_Event_OpenSearchDialog" 
 action="{!c.itemValueChanged}" />

itemValueChanged : function(cmp, event, helper){
    var params = event.getParams();
    var name = event.getName();
    //さらに親に伝搬させない
    event.stopPropagation();
},

####カスタムイベント（アプリケーションイベント）
アプリケーションイベントは pub/sub方式で、publishしたイベントをsubscribeしたコンポーネントが受け取れる。

//パラメータなし
<aura:event type="APPLICATION" description="Done task" />

イベントの発行（publish側）

//typeにはLightningイベントの名前
<aura:registerEvent name="taskDoneEvent" type="c:TaskDoneEvent"/>

var appEvent = $A.get("e.c:TaskDoneEvent");
appEvent.fire();

イベントのキャプチャ(Subscribe側)

eventにはLightningイベントの名前を設定
<aura:handler event="c:TaskDoneEvent" action="{!c.closeQuickActionPanel}"/>

closeQuickActionPanel : function(component, event, helper) {
   //アクションパネルを閉じる
   var dismissActionPanel = $A.get("e.force:closeQuickAction");
   dismissActionPanel.fire();
}