Salesforce Aura (Lightning) Components: How to Listen to Input Change Events Using onchange vs. aura:handler

Method 1 (Not Recommended): Using aura:handler for Value Changes

This approach uses <aura:handler name="change"> to listen for changes to an <aura:attribute>. While it detects changes, it blocks the use of component.set() in the controller. This means you cannot programmatically reset or modify the input value. For example, if the user types "foo" into a number field, calling component.set() to reset the value to an empty string will not work with this approach. This restriction is enforced to prevent errors such as validation loops.
Incorrect Example:
The following code listens for a value change on the attribute "myValue" using <aura:handler>. In the controller's handleChange function, calling component.set("{!v.myValue}", "New text") will NOT update the input field to "New text":

<aura:attribute name="myValue" type="String">
<aura:handler name="change" value="{!v.myValue}" action="{!c.handleChange}" />
<lightning:input type="text" name="textInput" label="Enter some text" value="{!v.myValue}" />

Method 2 (Recommended): Using onchange Attribute

Use the onchange attribute directly on <lightning:input>. This allows your controller's handleChange function to use component.set("{!v.myValue}", "New text") to successfully update the input value and trigger the appropriate validation behavior.
Correct Example:
The following code uses the onchange attribute on <lightning:input>. In the controller's handleChange function, component.set("{!v.myValue}", "New text") will successfully set myValue to "New text":

<aura:attribute name="myValue" type="String">
<lightning:input type="text" name="textInput" label="Enter some text" value="{!v.myValue}" onchange="{!c.handleChange}" />

For more information, refer to the documentation on the Aura Component lightning:input.