Events in Aura

Application Event

An application event is fired from an instance of a component. All components that provide a handler for the event are notified.

Steps:

Create a custom application event using the <aura:event> tag in a .evt resource.

• Events can contain attributes that can be set before the event is fired

• and read when the event is handled.

An application event is fired from an instance of a component. attributes are set before the event is fired

All components that provide a handler for the event are notified.

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

Component Event

The component that fires an event is known as the source component. The framework allows you to handle the event in different phases. These phases give you flexibility for how to best process the event for your application.

The phases are:

Capture

The event is captured and trickles down from the application root to the source component. The event can be handled by a component in the containment hierarchy that receives the captured event.

Event handlers are invoked in order from the application root down to the source component that fired the event.

Any registered handler in this phase can stop the event from propagating, at which point no more handlers are called in this phase or the bubble phase.

Bubble

The component that fired the event can handle it. The event then bubbles up from the source component to the application root. The event can be handled by a component in the containment hierarchy that receives the bubbled event.

Event handlers are invoked in order from the source component that fired the event up to the application root.

Any registered handler in this phase can stop the event from propagating, at which point no more handlers are called in this phase.

Here’s the sequence of component event propagation.

1. Event fired—A component event is fired.

2. Capture phase—The framework executes the capture phase from the application root to the source component until all components are traversed. Any handling event can stop propagation by calling stopPropagation() on the event.

3. Bubble phase—The framework executes the bubble phase from the source component to the application root until all components are traversed or stopPropagation() is called.