Component Events with example

by | Oct 22, 2018 | Lightning | 1 comment

Component Events:

 In my previous post, I demonstrated how application events can be used. This post is all about using component events. As explained in my earlier posts, component events are slightly different from application events because they are bound by containment hierarchy. Component events can only be handled by containers (other components) directly enclosing the source of the event. However, there is a way to allow every container in the hierarchy to handle these events. So let’s first see what a regular component event looks like.



This is your typical component event with a single payLoad studentID. It is similar in structure to application events with the only difference being the type. Here type is COMPONENT.


Event Registration:

Similar to the application events, component events too, need to be registered by a component before they can fire one. This is similar to application events. Here goes your sample event registration. This registration needs to be done in the markup of the component intending to fire the event.


This is how a component event can be registered by a firing party.


Fire the event:

Once an event has been registered, it can be fired depending on your need. An event is usually fired from either the controller.js or the helper.js file. Now this part looks slightly different from firing an application event. Remember how we used to get a reference of the event by doing a $A.get ? Here in case of component events, you need to do a component.getEvent(registered name of the event). Let’s see an example.


 console.log("Firing component event");
                var compEvent = component.getEvent("compEvent");
                console.log("StudentID:" + response.getReturnValue().Id);
                    studentID : response.getReturnValue().Id

This is how it is done. You get a reference to the registered event, set the payLoad if there is one needed and then fire it.


Event Handling:

Once an event has been fired, it needs to be handled by someone. Before being able to handle an event, a component needs to register a handler. The same component or any enclosing component can register a handler. Any component outside the containment hierarchy, even though registers a handler, won’t be able to handle the event as the event will never reach the said handling component.

Any component outside the containment hierarchy, even though registers a handler, won’t be able to handle the event as the event will never reach the said handling component.

Sample event handler registration:

This is how a handler is registered for a component event.


An important point to remember:


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

A simple mistake in following the point and your handler will never be able to handle the event even if it receives it.

Now lets see how to handle this event once it is received:


handleUpdateStudents : function(component, event, helper) {
		console.log("Handling update event");
        var studentID = event.getParam("studentID");

Here I have simply extracted the payLoad and logged it in the console. That’s all.


An important consideration:

As mentioned earlier in this post, not every container in the containment hierarchy can handle the events by default. Only containers who are directly enclosing the event source or in other words, are the owners/creators of the event source can handle the event. Sounds a little confusing ? Lets see an example.



If c:eventSource fires an event, it can handle the event itself. The event then bubbles up the containment hierarchy.

c:container contains c:eventSource but it’s not the owner because it’s not the outermost component in the markup, so it can’t handle the bubbled event.

c:owner is the owner because c:container is in its markup. c:owner can handle the event.

Now to fix this situation and to allow every container to handle the event we can just follow a simple trick. To allow a container component to handle the event, add includeFacets=”true” to the <aura:handler> tag of the container component. For example, adding includeFacets=”true” to the handler in the container component, c:container, enables it to handle the component event bubbled from c:eventSource.

That’s all folks! I believe following these simple techniques you can write your own component events. 

Component events are recommended by Salesforce whenever there is a need for communication using events. Unless there is a lack of containment hierarchy, in which case application events are to be used.

Bishwambhar Sen
Bishwambhar Sen is an IT professional with over 10 years of industry experience. He is a Salesforce certified developer and admin. When he is not configuring and customising, he loves photography, traveling and blogging.
Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

Share This