I was debugging an issue in my JavaScript code with a variable not being properly set. After a little research, I found out that the variable was not being populated because it was taking its value from an event property that didn't exist. In this case, it was deriving its value from event.currentTarget, which was strangely null.

So I'm a little baffled now. I always though that event.currentTarget always pointed to whatever element held the listener that fired the event. So under what circumstances would event.currentTarget actually be null?

I was debugging an issue in my JavaScript code with a variable not being properly set. After a little research, I found out that the variable was not being populated because it was taking its value from an event property that didn't exist. In this case, it was deriving its value from event.currentTarget, which was strangely null.

So I'm a little baffled now. I always though that event.currentTarget always pointed to whatever element held the listener that fired the event. So under what circumstances would event.currentTarget actually be null?

• javascript
• dom-events

• 2 It would be undefined or null if you triggered the event programatically or you are using an older IE version. – Felix Kling Commented Jan 18, 2013 at 15:35
• Here's an amazing demo showing how and when all these event properties are set: liouh./jsevents – Joseph Silber Commented Jan 18, 2013 at 15:36
• if you not already do i would remend to use a library like jQuery for event handling to avoid running into problems with the different browsers setting different properties. – t.niese Commented Jan 18, 2013 at 15:38
• @Felix Kling - I can verify that the event is actually being fired by the user and not by the code. And I am using Firefox as well. – kinsho Commented Jan 18, 2013 at 15:40
• @ Joseph Silber - Thank you for the demo. I was considering using event.originalTarget, but from my impression, it seems event.currentTarget is the de facto way of figuring out which element the listener belongs to. I'd rather stick to event.currentTarget – kinsho Commented Jan 18, 2013 at 15:41

1 Answer 1

The problem was with the way the event was being handled. As you can see below, the event object itself was not only to be processed by its respective handler function; it was also going to be processed by another function that was invoked only when an AJAX call that was made in the handler returned successfully. However, once the success function executes under the AJAX call, the event object loses some of its context, namely its currentTarget property. I presume that the reason why this is is because we're not directly within the scope of the handler once the browser starts executing code within the success function.

$('#element').click(function(e) {
    
    // bunch of lines of code here

    $.ajax({
       type: 'POST',
       url: // url,
       ...,
       success: function(response) {

           // more lines of code here

           callAnotherFunction(e);
           // When we invoke the above function, we pass the event in as a 
           // parameter, but the event has already lost some of its context
           // due to scope change.
       }
    });

})