Application Events

Create Custom Application Event

You can create custom application events 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.

Use type="APPLICATION" in the <aura:event> tag for an application event. For example, this is an application event with one message attribute.

1<aura:event type="APPLICATION">
2    <!-- add aura:attribute tags to define event shape.
3      One sample attribute here -->
4    <aura:attribute name="message" type="String"/>
5</aura:event>

The component that handles an event can retrieve the event data. To retrieve the attribute in this event, call event.getParam("message") in the handler’s client-side controller.

Register Application Event

A component registers that it may fire an application event by using <aura:registerEvent> in its markup. Note that the name attribute is required but not used for application events. The name attribute is only relevant for component events. This example uses name="appEvent" but the value is not used anywhere.

1<aura:registerEvent name="appEvent" type="auradocs:appEvent"/>

Fire Application Event

Use $A.get("e.myNamespace:myAppEvent") in JavaScript to get an instance of the myAppEvent event in the myNamespace namespace. Use fire() to fire the event.

1var appEvent = $A.get("e.auradocs:appEvent");
2// set some data for the event (also known as event shape)
3//appEvent.setParams({ ... });
4appEvent.fire();

Handle Application Event

Use <aura:handler> in the markup of the handler component. The action attribute of <aura:handler> sets the client-side controller action to handle the event. For example:

1<aura:handler event="auradocs:appEvent" action="{!c.handleApplicationEvent}"/>

When the event is fired, the handleApplicationEvent client-side controller action is called.

Get the Source of an Application Event

Note that evt.getSource() doesn’t work for application events It only works for component events. A component event is usually fired by code like cmp.getEvent('myEvt').fire(); so it's obvious who fired the event. However, it's relatively opaque which component fired an application event. It’s fired by code like $A.getEvt('myEvt').fire(); If you need to find the source of an application event, you could use evt.setParams() to set the source component in the event data before firing it. For example, evt.setParams("source" : sourceCmp), where sourceCmp is a reference to the source component.

Events Fired on App Rendering

Several events are fired when an app is rendering. All init events are fired to indicate the component or app has been initialized. If a component is contained in another component or app, the inner component is initialized first. If any server calls are made during rendering, aura:waiting is fired. Finally, aura:doneWaiting and aura:doneRendering are fired in that order to indicate that all rendering has been completed. For more information, see Events Fired During the Rendering Lifecycle.