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();
}
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)}"/>