---
schema_version: "1"
id: 47f418bc7ee4d42c2614c24141f4b8a79beedbf3eb63f56bc52212044466aa98
title: Dynamically Adding Event Handlers To a Component
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/aura-platform/guides/aura/js-cb/js-cb-dynamic-handler.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/js-cb-dynamic-handler.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 72a50ffacd57c47c5463e3de82c0fd33a2a64a577f34cce05f72cfa119b76b9f
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

# 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.

```javascript
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:

    ```nolang
    function(auraEvent) {
        // handling logic here
    }
    ```


For a description of the other arguments, see the [JavaScript API](http://documentation.auraframework.org/auradocs#reference) 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](https://developer.salesforce.com/docs/platform/aura-platform/guide/js-cb-dynamic-cmp-async.md).

## Example

This component has buttons to fire and handle a component event and an application event.

```nolang
<!--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>
```

Here’s the client-side controller.

```javascript
/* 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:

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

The syntax for an application event is:

```javascript
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:

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

**See Also**  


-   [Handling Events with Client-Side Controllers](https://developer.salesforce.com/docs/platform/aura-platform/js/js-client-side-controller.md)
-   [Handling Component Events](https://developer.salesforce.com/docs/platform/aura-platform/events/events-component-handling-intro.md)
-   [Lightning Component Library](https://developer.salesforce.com/docs/platform/aura-platform/components/component-library.md)