Lightning コンポーネント開発者ガイド
jUI コンポーネントのイベント処理
UI コンポーネントは、キーボード操作やマウス操作などのユーザインターフェースイベントを処理しやすくします。これらのイベントをリスンすると、updateon 属性を使用して UI 入力コンポーネントの値をバインドし、これらのイベントの起動時に値を更新することもできます。
コンポーネントにハンドラを定義して、UI イベントを取得します。たとえば、ui:inputTextArea コンポーネントで onblur という HTML DOM イベントをリスンすることができます。
1<ui:inputTextArea aura:id="textarea" value="My text area" label="Type something"
2 blur="{!c.handleBlur}" />
blur="{!c.handleBlur}" は、onblur イベントをリスンして、クライアント側コントローラに結び付けます。このイベントをトリガすると、次のクライアント側コントローラがイベントを処理します。
1handleBlur : function(cmp, event, helper){
2 var elem = cmp.find("textarea").getElement();
3 //do something else
4}すべてのコンポーネントで使用可能な全イベントについては、「コンポーネントの参照」を参照してください。
ブラウザイベントの値のバインド
UI の変更はコンポーネント属性に反映され、その属性の変更は UI に伝搬されます。コンポーネントを読み込むと、入力要素の値がコンポーネント属性の値に初期化されます。ユーザ入力が変更されると、コンポーネント変数の値が更新されます。たとえば、コンポーネント属性にバインドされている値を ui:inputText コンポーネントに含めて、同じコンポーネント属性に ui:outputText コンポーネントをバインドできます。ui:inputText コンポーネントは、onkeyup ブラウザイベントをリスンし、対応するコンポーネント属性値を更新します。
1<aura:attribute name="first" type="String" default="John"/>
2<aura:attribute name="last" type="String" default="Doe"/>
3
4<ui:inputText label="First Name" value="{!v.first}" updateOn="keyup"/>
5<ui:inputText label="Last Name" value="{!v.last}" updateOn="keyup"/>
6
7<!-- Returns "John Doe" -->
8<ui:outputText value="{!v.first +' '+ v.last}"/>1<aura:attribute name="number1" type="integer" default="1"/>
2<aura:attribute name="number2" type="integer" default="2"/>
3
4<ui:inputNumber label="Number 1" value="{!v.number1}" updateOn="keyup" />
5<ui:inputNumber label="Number 2" value="{!v.number2}" updateOn="keyup" />
6
7<!-- Adds the numbers and returns the sum -->
8<ui:outputNumber value="{!(v.number1 * 1) + (v.number2 * 1)}"/>