最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Why is event.currentTarget null in my function? - Stack Overflow

programmeradmin0浏览0评论

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?

Share Improve this question edited Nov 24, 2023 at 22:17 isherwood 61.1k16 gold badges121 silver badges169 bronze badges asked Jan 18, 2013 at 15:33 kinshokinsho 5363 silver badges11 bronze badges 6
  • 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
 |  Show 1 more ment

1 Answer 1

Reset to default 7

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.
       }
    });

})
发布评论

评论列表(0)

  1. 暂无评论