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().
({ 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; } })
event.getSource().get("v.name")
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"); } })
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; } } })
//Before var menuItem = event.detail.menuItem; var itemValue = menuItem.get("v.value"); //After var itemValue = event.getParam("value");
//Before var tab = event.detail.selectedTab; var tabId = tab.get("v.id"); //After var tabId = event.getParam("id");