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.

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

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

1({
2     handleInputChange : function(component, event) {
3        let val = component.get("v.textvalue");
4    }
5})

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

1<aura:component>
2    <lightning:button name="myButton" label="Click me" onclick="{!c.doSomething}"/>
3</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.

1({
2    doSomething: function(cmp, event, helper) {
3        var button = event.getSource();
4
5        //Don’t use the following patterns for events
6        //that are fired by another component 
7        //or a base Lightning component        
8        var el = event.target;
9        var currentEl = event.currentTarget;
10    }
11})

If Lightning Web Security 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.

Note

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

1event.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").

1<aura:component>
2    <lightning:button label="New Record" name="new" onclick="{!c.handleClick}"/>
3    <lightning:button label="Edit" name="edit" onclick="{!c.handleClick}"/>
4    <lightning:button label="Delete" name="delete" onclick="{!c.handleClick}"/>
5</aura:component>

1({
2    handleClick: function(cmp, event, helper) {
3        //returns "new", "edit", or "delete"
4        var buttonName = event.getSource().get("v.name");
5    }
6})

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.

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

1({
2      handleActive: function (cmp, event) {
3          var tab = event.getSource();
4          switch (tab.get('v.id')) {
5              case 'tab1':
6                  //do something when tab1 is clicked
7                  break;
8              case 'tab2':
9                  //do something when tab2 is clicked
10                  break;
11          }
12      }
13})

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.

1//Before 
2var menuItem = event.detail.menuItem;
3var itemValue = menuItem.get("v.value");
4//After
5var itemValue = event.getParam("value");

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

1//Before
2var tab = event.detail.selectedTab;
3var tabId = tab.get("v.id");
4//After
5var tabId = event.getParam("id");

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

Note

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

1<aura:component>
2    <aura:attribute name="value" type="String" default="Initial value"/>
3
4    <!–- Don’t use event handlers that are not supported -->
5    <lightning:input value="{!v.value}" onkeydown="{!c.handleKeyDown}"/>
6</aura:component>

Since onkeydown is not a supported event handler based on the lightning:input specifications, event.getParam("value") and event.detail return undefined.