Dynamically Adding Event Handlers To a Component
The addEventHandler() method in the Component object replaces the deprecated addHandler() method.
To add an event handler to a component dynamically, use the addEventHandler() method.
addEventHandler(String event, Function handler, String phase, String includeFacets)
- event
- The first argument is the name of the event that triggers the handler. You can’t
force a component to start firing events that it doesn’t fire, so make sure that
this argument corresponds to an event that the component fires. The <aura:registerEvent> tag in a component’s
markup advertises an event that the component fires.
- For a component event, set this argument to match the name attribute of the <aura:registerEvent> tag.
- For an application event, set this argument to match the event descriptor in the format namespace:eventName.
- handler
- The second argument is the action that handles the event. The format is similar
to the value you would put in the action
attribute in the <aura:handler> tag if
the handler was statically defined in the markup. There are two options for this argument.
- To use a controller action, use the format: cmp.getReference("c.actionName").
- To use an anonymous function, use the
format:
function(auraEvent) { // handling logic here }
For a description of the other arguments, see the JavaScript API in the Aura Reference app.
You can also add an event handler to a component that is created dynamically in the callback function of $A.createComponent(). For more information, see Dynamically Creating Components.
Example
This component has buttons to fire and handle a component event and an application event.
<!--c:dynamicHandler-->
<aura:component >
<aura:registerEvent name="compEvent" type="c:sampleEvent"/>
<aura:registerEvent name="appEvent" type="c:appEvent"/>
<h1>Add dynamic handler for event</h1>
<p>
<lightning:button label="Fire component event" onclick="{!c.fireEvent}" />
<lightning:button label="Add dynamic event handler for component event" onclick="{!c.addEventHandler}" />
</p>
<p>
<lightning:button label="Fire application event" onclick="{!c.fireAppEvent}" />
<lightning:button label="Add dynamic event handler for application event" onclick="{!c.addAppEventHandler}" />
</p>
</aura:component>
/* dynamicHandlerController.js */
({
fireEvent : function(cmp, event) {
// Get the component event by using the
// name value from <aura:registerEvent> tag
var compEvent = cmp.getEvent("compEvent");
compEvent.fire();
console.log("Fired a component event");
},
addEventHandler : function(cmp, event) {
// First param matches name attribute in <aura:registerEvent> tag
cmp.addEventHandler("compEvent", cmp.getReference("c.handleEvent"));
console.log("Added handler for component event");
},
handleEvent : function(cmp, event) {
alert("Handled the component event");
},
fireAppEvent : function(cmp, event) {
var appEvent = $A.get("e.c:appEvent");
appEvent.fire();
console.log("Fired an application event");
},
addAppEventHandler : function(cmp, event) {
// Can use cmp.getReference() or anonymous function for handler
// First param is event descriptor, "c:appEvent", for application events
cmp.addEventHandler("c:appEvent", cmp.getReference("c.handleAppEvent"));
// Can alternatively use anonymous function for handler
//cmp.addEventHandler("c:appEvent", function(auraEvent) {
// console.log("Handled the application event in anonymous function");
//});
console.log("Added handler for application event");
},
handleAppEvent : function(cmp, event) {
alert("Handled the application event");
}
})
Notice the first parameter of the addEventHandler() calls. The syntax for a component event is:
cmp.addEventHandler("compEvent", cmp.getReference("c.handleEvent"));
The syntax for an application event is:
cmp.addEventHandler("c:appEvent", cmp.getReference("c.handleAppEvent"));
For either a component or application event, you can use an anonymous function as a handler instead of using cmp.getReference() for a controller action.
For example, the application event handler could be:
cmp.addEventHandler("c:appEvent", function(auraEvent) {
// add handler logic here
console.log("Handled the application event in anonymous function");
});