Event Handling in UI Components

UI components provide easy handling of user interface events such as keyboard and mouse interactions. By listening to these events, you can also bind values on UI input components using the updateon attribute, such that the values update when those events are fired.

Capture a UI event by defining its handler on the component. For example, you want to listen to the HTML DOM event, onblur, on a ui:inputTextArea component.

<ui:inputTextArea aura:id="textarea" value="My text area" label="Type something" 
	    	blur="{!c.handleBlur}" />
The blur="{!c.handleBlur}" listens to the onblur event and wires it to your client-side controller. When you trigger the event, the following client-side controller handles the event.
handleBlur : function(cmp, event, helper){
    var elem = cmp.find("textarea").getElement();
    //do something else
}

For all available events on all components, see the Component Reference.

Value Binding for Browser Events

Any changes to the UI are reflected in the component attribute, and any change in that attribute is propagated to the UI. When you load the component, the value of the input elements are initialized to those of the component attributes. Any changes to the user input causes the value of the component variable to be updated. For example, a ui:inputText component can contain a value that’s bound to a component attribute, and the ui:outputText component is bound to the same component attribute. The ui:inputText component listens to the onkeyup browser event and updates the corresponding component attribute values.
<aura:attribute name="first" type="String" default="John"/>
<aura:attribute name="last" type="String" default="Doe"/>

<ui:inputText label="First Name" value="{!v.first}" updateOn="keyup"/>
<ui:inputText label="Last Name" value="{!v.last}" updateOn="keyup"/>

<!-- Returns "John Doe" -->
<ui:outputText value="{!v.first +' '+ v.last}"/>
The next example takes in numerical inputs and returns the sum of those numbers. The ui:inputNumber component listens to the onkeyup browser event. When the value in this component changes on the keyup event, the value in the ui:outputNumber component is updated as well, and returns the sum of the two values.
<aura:attribute name="number1" type="integer" default="1"/>
<aura:attribute name="number2" type="integer" default="2"/>

<ui:inputNumber label="Number 1" value="{!v.number1}" updateOn="keyup" />
<ui:inputNumber label="Number 2" value="{!v.number2}"  updateOn="keyup" />

<!-- Adds the numbers and returns the sum -->
<ui:outputNumber  value="{!(v.number1 * 1) + (v.number2 * 1)}"/>
Note

Note

The input fields return a string value and must be properly handled to accommodate numerical values. In this example, both values are multiplied by 1 to obtain their numerical equivalents.