7

event.target.value not working after enabling lockerservice in lightning. Can you guys help me with this? Thanks

1
  • 1
    I did a quick test from Lightning developer guide pg-117 which makes use of event.target.value which works pretty fine with locker service enabled. Probably you need to handle both the framework event and the native browser event. – Pavan Jun 14 '16 at 11:09
9

You guys must know that if you are using lightning component for eg.

<lightning:button label="Submit" value="xyz" onclick="{! c.handleClick }" />

You can't access it's value attribute using

event.target.value

because DOM is not accessible due to locker service. You have to use

event.getSource().get("v.value") 

And if you are using simple html attribute then you can get it's value normally using DOM event eg.

<div value="Test" onclick="{!c.myFunc}">CLick Me</div>
<a href="#" onclick="{!c.myFunc}" value="123">click me</a>

You need to write in that case

event.target.value
6

Remember that locker service uses a component capability model, and unless you "own" the component where the event was triggered, you will not be able to access its internal, including its value attribute.

"owning" means: the component is in the same namespace, or the component is created in your *.cmp markup or programmatically from your own component.

Under normal conditions, for DOM events, if you can set the listener, you can also access currentTarget instead of target.

event.target points to the emitter, and event.currentTarget points to the recipient of the listener.

This is a very tricky issue, because unless you own something, you can't inspect it. We will get someone to investigate more, but we will need more information from you:

  • how are you defining the listener?
  • what component is the event emitter in your code?
  • it seems that you're dealing with input elements, what component are you using to create that input element?
3

You need to handle both the framework and native browser event

    if (event.getSource) {
        // handling a framework component event
          target = event.getSource(); // this is a Component object

    } else {
       // handling a native browser event
       target = event.target.value; // this is a DOM element
   }

If in a component event if event.target.value is used then it will be undefined

3

We are also facing this issue in our code. Anyhow we are going with an alternate and recommended way to do this, which is replacing the event.target.value with the following line:

event.getSource().getElement().value

You might find the source code useful.

2
  • Hi, I tried to use it .However got the error "TypeError: event.getSource is not a function" – Gautam Maheshwari Jun 14 '16 at 10:38
  • @Gautam Could you post a small code snippet to explain your scenario. Our scenario might be different from yours – Gopal Rao Jun 14 '16 at 10:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.