Overview
Understanding events in the Aura framework is essential for building modular, decoupled Lightning components. Aura supports two main event types — Application events and Component events — each with distinct propagation patterns and use cases. This post explains the core differences, concise examples, and recommended best practices for choosing between them.
Key differences
Below are the primary differences you should know when working with Aura events:
1. Scope & Propagation
Component Event: Propagates up the containment hierarchy (from child to parent). The event is handled by an ancestor that registers a handler. It follows a bubble-up model similar to DOM event bubbling.
Application Event: Broadcasts globally to all components that register a handler for the event — regardless of containment. It acts like a publish-subscribe (pub/sub) mechanism within the current Lightning application.
2. Use Cases
Component Event: Use for child-to-parent communication where the child wants to notify an ancestor to react (e.g., a child component informs its container to update UI or data).
Application Event: Use for app-level notifications or cross-hierarchy communication (e.g., global user status updates, notifications, or when many unrelated components need the same event).
3. Declaration & Registration
Both events are declared in the .evt file but differ in type:
<aura:event type="COMPONENT" description="Component-level event"> <aura:attribute name="payload" type="String" /> </aura:event>
<aura:event type="APPLICATION" description="Application-level event"> <aura:attribute name="payload" type="String" /> </aura:event>
4. Performance Considerations
Application events are more expensive if overused because they broadcast to all handlers in the app. Component events are scoped and generally more efficient for parent-child communication.
5. Predictability & Coupling
Component events maintain clearer parent/child relationships and are easier to reason about for localized communication. Application events introduce looser coupling — useful for decoupling but can make flow harder to trace if abused.
Simple examples
Component event declaration (c:childEvent.evt):
<aura:event type="COMPONENT" description="Child to parent">
<aura:attribute name="message" type="String" />
</aura:event>
Child component fires the component event:
// In childController.js
var cmpEvent = component.getEvent("c:childEvent");
cmpEvent.setParams({"message": "Hello Parent"});
cmpEvent.fire();
Parent component registers handler in markup:
<c:child onMyCmpEvent="{!c.handleChildEvent}" />
Application event declaration (c:appEvent.evt):
<aura:event type="APPLICATION" description="Global notification">
<aura:attribute name="message" type="String" />
</aura:event>
Any component can fire:
// In someController.js
var appEvent = $A.get("e.c:appEvent");
appEvent.setParams({"message": "Global update"});
appEvent.fire();
Any component can handle by registering a handler in markup or controller:
<aura:handler event="c:appEvent" action="{!c.handleAppEvent}" />
Best practices
- Prefer component events for straightforward child-to-parent communication.
- Use application events sparingly for true cross-hierarchy or global notifications.
- Document application events thoroughly — they can be hard to trace in larger apps.
- Consider Lightning Message Service (LMS) or Pub/Sub patterns for complex inter-component communication in modern implementations.
Summary
Component events bubble up within the component containment tree and are ideal for parent-child interactions. Application events broadcast across the whole app to any registered handler and are suited for global messaging. Choose the event type that delivers the right scope and maintainability for your architecture.