Dynamically Adding Event Handlers To a Component

You can dynamically add a handler for an event that a component fires.

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.

1addEventHandler(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:

1function(auraEvent) {
2    // handling logic here
3}

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.

1<!--c:dynamicHandler-->
2<aura:component >
3    <aura:registerEvent name="compEvent" type="c:sampleEvent"/>
4    <aura:registerEvent name="appEvent" type="c:appEvent"/>
5    <h1>Add dynamic handler for event</h1>
6    <p>
7        <lightning:button label="Fire component event" onclick="{!c.fireEvent}" />
8        <lightning:button label="Add dynamic event handler for component event" onclick="{!c.addEventHandler}" />
9    </p>
10    <p>
11        <lightning:button label="Fire application event" onclick="{!c.fireAppEvent}" />
12        <lightning:button label="Add dynamic event handler for application event" onclick="{!c.addAppEventHandler}" />
13    </p>
14
15</aura:component>

Here’s the client-side controller.

1/* dynamicHandlerController.js */
2({
3    fireEvent : function(cmp, event) {
4        // Get the component event by using the
5        // name value from <aura:registerEvent> tag
6        var compEvent = cmp.getEvent("compEvent");
7        compEvent.fire();
8        console.log("Fired a component event");
9    },
10    
11    addEventHandler : function(cmp, event) {
12        // First param matches name attribute in <aura:registerEvent> tag
13        cmp.addEventHandler("compEvent", cmp.getReference("c.handleEvent"));
14        console.log("Added handler for component event");
15    },
16
17    handleEvent : function(cmp, event) {
18        alert("Handled the component event");
19    },
20
21    fireAppEvent : function(cmp, event) {
22        var appEvent = $A.get("e.c:appEvent");
23        appEvent.fire();
24        console.log("Fired an application event");
25    },
26    
27    addAppEventHandler : function(cmp, event) {
28        // Can use cmp.getReference() or anonymous function for handler
29        // First param is event descriptor, "c:appEvent", for application events
30        cmp.addEventHandler("c:appEvent", cmp.getReference("c.handleAppEvent"));
31        // Can alternatively use anonymous function for handler
32        //cmp.addEventHandler("c:appEvent", function(auraEvent) {
33            // console.log("Handled the application event in anonymous function");
34        //});
35        console.log("Added handler for application event");
36    },
37
38    handleAppEvent : function(cmp, event) {
39        alert("Handled the application event");
40    }         
41})

Notice the first parameter of the addEventHandler() calls. The syntax for a component event is:

1cmp.addEventHandler("compEvent", cmp.getReference("c.handleEvent"));

The syntax for an application event is:

1cmp.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:

1cmp.addEventHandler("c:appEvent", function(auraEvent) {
2    // add handler logic here
3    console.log("Handled the application event in anonymous function");
4});

See Also