Event Handling in Base Lightning 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 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.

LockerService, which will be enabled for all orgs in Summer ’17, enforces encapsulation. Use the methods described here to make your code compliant with LockerService.

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

<aura:component>
    <lightning:button name="myButton" onclick="{!c.doSomething}"/>
</aura:component>
({
    doSomething: function(cmp, event, helper) {
        var button = event.getSource();

        //The following patterns are not supported
        //when you’re trying to access another component’s
        //DOM elements.
        var el = event.target;
        var currentEl = event.currentTarget;
    }
})
Retrieve a component attribute that’s passed to the event by using this syntax.
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").

<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>
({
    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 once only.

<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>
({
      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.
//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:
//Before
var tab = event.detail.selectedTab;
var tabId = tab.get("v.id");
//After
var tabId = event.getParam("id");
Note

Note

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