Lightning Components Developer Guide

What is the Lightning Component Framework?
Quick Start
Creating Components
Using Components
Communicating with Events
Handling Events with Client-Side Controllers
Actions and Events
Component Events
Application Events
Event Handling Lifecycle
Advanced Events Example
Firing Lightning Events from Non-Lightning Code
Events Best Practices
Events Fired During the Rendering Lifecycle
Salesforce1 Events
System Events
Creating Apps
Debugging
Reference
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Actions and Events

The framework uses events to relay data between components, which are usually triggered by a user action. Here are some considerations for working with actions and events.
Actions
User interaction with an element on a component or app. User actions trigger events, but events are not always explicitly triggered by user actions. Note that this type of action is not the same as a client-side JavaScript controller, which is sometimes known as a controller action. The following button is wired up to a browser onclick event in response to a button click. 
1<ui:button label = "Click Me" press = "{!c.handleClick}" />

Clicking the button invokes the handeClick method in the component’s client-side controller.

Events
A notification by the browser regarding an action. Browser events are handled by client-side JavaScript controllers, as shown in the previous example. Note that a browser event is not the same as a component event or application event, which you can create and fire on your own in a JavaScript controller to communicate data between components. For example, you can wire up the click event of a checkbox to a client-side controller, which then fires a component event to communicate relevant data to a parent component.

Another type of event, known as a system event, is fired automatically by the framework during its lifecycle, such as during component initialization, change of an attribute value, and rendering. Components can handle a system event by registering the event in the component markup.

The following diagram describes what happens when a user clicks a button that requires the component to retrieve data from the server.

Events can be triggered by actions or other events.
  1. User clicks a button or interacts with a component, triggering a browser event. For example, you want to save data from the server when the button is clicked.
  2. The button click invokes a client-side JavaScript controller, which provides some custom logic before invoking a helper function.
  3. The JavaScript controller invokes a helper function. Note that a helper function improves code reuse but it’s optional for this example.
  4. The helper function calls an Apex controller method and queues the action.
  5. The Apex method is invoked and data is returned.
  6. A JavaScript callback function is invoked when the Apex method completes.
  7. The JavaScript callback function evaluates logic and updates the component’s UI.
  8. User sees the updated component.

Alternatively, consider an attribute value on a component that changes without a user action directly causing it, which then automatically fires a change event. When the attribute value changes, the component that registers a change event handles this event by invoking a JavaScript controller that contains custom logic, which could then proceed from step (3) onwards to retrieve data from the server.