Handling Component Events

A component event can be handled by the component that fired the event or by a component in the containment hierarchy that receives the event.

Use <aura:handler> in the markup of the handler component. For example:

The name attribute in <aura:handler> must match the name attribute in the <aura:registerEvent> tag in the component that fires the event.

The action attribute of <aura:handler> sets the client-side controller action to handle the event.

The event attribute specifies the event being handled. The format is namespace:eventName.

In this example, when the event is fired, the handleComponentEvent client-side controller action is called.

Component event handlers are associated with the bubble phase by default. To add a handler for the capture phase instead, use the phase attribute.

In the client-side controller action for an <aura:handler> tag, use evt.getSource() to find out which component fired the event, where evt is a reference to the event. To retrieve the source element, use evt.getSource().getElement().

• Component Handling Its Own Event

  A component can handle its own event by using the <aura:handler> tag in its markup.

• Handle Component Event of Instantiated Component

  A parent component can set a handler action when it instantiates a child component in its markup.

• Handling Bubbled or Captured Component Events

  Event propagation rules determine which components in the containment hierarchy can handle events by default in the bubble or capture phases. Learn about the rules and how to handle events in the bubble or capture phases.

• Handling Component Events Dynamically

  A component can have its handler bound dynamically via JavaScript. This is useful if a component is created in JavaScript on the client-side.

See Also

• Component Event Propagation
• Handling Application Events