---
schema_version: "1"
id: ba51a0d4eada4bb555cf8ef0f8e2f5cbb8b55a2772ea61149a4c9611b50cd48d
title: Event Handling in Lightning Base Components
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/aura-platform/guides/aura/slds/lightning-base-events.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/lightning-base-events.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: d6717b0adcdbd6a47588cba1b4d85c8debcc638db240d23f113062a2dd7ed997
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

# Event Handling in Lightning Base Components

Base components are lightweight and closely resemble HTML markup. They follow standard HTML practices by providing event handlers as attributes, such as `onfocus`, instead of registering and firing Lightning component events, like components in the ui namespace.

Because of their markup, you might expect to access DOM elements for base components via `event.target` or `event.currentTarget`. However, this type of access breaks encapsulation because it provides access to another component’s DOM elements, which are subject to change.

Use the methods described here to make your code compliant with Lightning Locker.

We recommend binding your value to an attribute. For example, bind the value for `lightning:input` to a `textvalue` attribute.

```nolang
<aura:component>
    <aura:attribute name="textvalue" type="String" default="Initial value"/>
    <lightning:input value="{!v.textvalue}" onchange="{!c.handleInputChange}"/>
</aura:component>
```

In your client-side controller, use the event handler to get the `textvalue` attribute value.

```javascript
({
     handleInputChange : function(component, event) {
        let val = component.get("v.textvalue");
    }
})
```

Alternatively, to retrieve the component that fired the event, use `event.getSource()`.

```nolang
<aura:component>
    <lightning:button name="myButton" label="Click me" onclick="{!c.doSomething}"/>
</aura:component>
```

For an event fired by a custom component or a base component, use `event.getSource()`. For events fired by standard HTML elements, you can use `event.currentTarget` and `event.target`. For example, `event.target` returns null when the `lightning:button` component in the example is clicked.

```javascript
({
    doSomething: function(cmp, event, helper) {
        var button = event.getSource();

        //Don’t use the following patterns for events
        //that are fired by another component 
        //or a base Lightning component        
        var el = event.target;
        var currentEl = event.currentTarget;
    }
})
```

**note:** If [Lightning Web Security](https://developer.salesforce.com/docs/platform/lightning-components-security/guide/lws-intro.html) is enabled in your org, `event.currentTarget` and `event.target` return the corresponding elements. For example, in the `lightning:button` example, both properties return the `<button>` element.

Retrieve a component attribute that’s passed to the event by using this syntax.

```javascript
event.getSource().get("v.name")
```

## Reusing Event Handlers

`event.getSource()` helps you determine which component fired an event. Let’s say you have several buttons that reuse the same `onclick` handler. To retrieve the name of the button that fired the event, use `event.getSource().get("v.name")`.

```nolang
<aura:component>
    <lightning:button label="New Record" name="new" onclick="{!c.handleClick}"/>
    <lightning:button label="Edit" name="edit" onclick="{!c.handleClick}"/>
    <lightning:button label="Delete" name="delete" onclick="{!c.handleClick}"/>
</aura:component>
```

```javascript
({
    handleClick: function(cmp, event, helper) {
        //returns "new", "edit", or "delete"
        var buttonName = event.getSource().get("v.name");
    }
})
```

## Retrieving the Active Component Using the `onactive` Handler

When working with tabs, you want to know which one is active. The `lightning:tab` component enables you to obtain a reference to the target component when it becomes active using the `onactive` handler. Clicking the component multiple times invokes the handler one time only.

```nolang
<aura:component>
    <lightning:tabset>
      <lightning:tab onactive="{! c.handleActive }" label="Tab 1" id="tab1" />
      <lightning:tab onactive="{! c.handleActive }" label="Tab 2" id="tab2" />
    </lightning:tabset>
</aura:component>
```

```javascript
({
      handleActive: function (cmp, event) {
          var tab = event.getSource();
          switch (tab.get('v.id')) {
              case 'tab1':
                  //do something when tab1 is clicked
                  break;
              case 'tab2':
                  //do something when tab2 is clicked
                  break;
          }
      }
})
```

## Retrieving the ID and Value Using the `onselect` Handler

Some components provide event handlers to pass in events to child components, such as the `onselect` event handler on the following components.

-   `lightning:buttonMenu`
-   `lightning:tabset`

Although the `event.detail` syntax continues to be supported, we recommend that you update your JavaScript code to use the following patterns for the `onselect` handler as we plan to deprecate `event.detail` in a future release.

-   `event.getParam("id")`
-   `event.getParam("value")`

For example, you want to retrieve the value of a selected menu item in a `lightning:buttonMenu` component from a client-side controller.

```javascript
//Before 
var menuItem = event.detail.menuItem;
var itemValue = menuItem.get("v.value");
//After
var itemValue = event.getParam("value");
```

Similarly, to retrieve the ID of a selected tab in a `lightning:tabset` component:

```javascript
//Before
var tab = event.detail.selectedTab;
var tabId = tab.get("v.id");
//After
var tabId = event.getParam("id");
```

**note:** If you need a reference to the target component, use the `onactive` event handler instead.

## Base Components Limitations for Native HTML Events

All supported event handlers on a base component are listed in the [Specification tab of the component reference](https://developer.salesforce.com/docs/component-library/bundle/lightning-input/specification). The event handler names start with `on`, for example, `onchange`.

Base components generally don’t support native HTML events, unlike their [Lightning web component counterparts](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.migrate_base_components). You might encounter unexpected behavior if you try to handle an HTML event on a base component. Let’s say you want to handle the `onkeydown` HTML event on `lightning:input`.

```nolang
<aura:component>
    <aura:attribute name="value" type="String" default="Initial value"/>

    <!–- Don’t use event handlers that are not supported -->
    <lightning:input value="{!v.value}" onkeydown="{!c.handleKeyDown}"/>
</aura:component>
```

Since `onkeydown` is not a supported event handler based on the [`lightning:input` specifications](https://developer.salesforce.com/docs/component-library/bundle/lightning-input/specification), `event.getParam("value")` and `event.detail` return `undefined`.