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)
function(auraEvent) { // handling logic here }
For a description of the other arguments, see the JavaScript API in the doc 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.
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"); });