javascript - Why does e.currentTarget change with jQuery's event delegation? - Stack Overflow

,js,console,output

  <div id="container">
    <button id="foo">Foo button</button>
    <button id="bar">Bar button</button>
  </div>

$('#container').on('click', function(e) {
  var targetId = e.target.getAttribute('id');
  // Manually do event delegation
  if (targetId === 'foo') {
    var currentId = e.currentTarget.getAttribute('id');
    console.log('without delegation, currentTarget is: ' + currentId);
  }
});

$('#container').on('click', '#foo', function(e) {
    var currentId = e.currentTarget.getAttribute('id');
    console.log('with delegation, currentTarget is: ' + currentId);
});

Basically, my understanding of e.currentTarget for an event is that it reflects the point to which the event has bubbled to. Since I have an event listener on the #container element, I would expect the currentTarget to be container in both scenarios.

This is true for the standard on handler, as shown by the first example. However, when using event delegation (the #foo argument on the second click), currentTarget changes to be the inner button.

Why does the e.currentTarget change between the two scenarios? Specifically, in the latter case, does this mean that jQuery is not putting the event listener on the parent (#container) element?

http://jsbin./xaguxuhiwu/1/edit?html,js,console,output

  <div id="container">
    <button id="foo">Foo button</button>
    <button id="bar">Bar button</button>
  </div>

$('#container').on('click', function(e) {
  var targetId = e.target.getAttribute('id');
  // Manually do event delegation
  if (targetId === 'foo') {
    var currentId = e.currentTarget.getAttribute('id');
    console.log('without delegation, currentTarget is: ' + currentId);
  }
});

$('#container').on('click', '#foo', function(e) {
    var currentId = e.currentTarget.getAttribute('id');
    console.log('with delegation, currentTarget is: ' + currentId);
});

Basically, my understanding of e.currentTarget for an event is that it reflects the point to which the event has bubbled to. Since I have an event listener on the #container element, I would expect the currentTarget to be container in both scenarios.

This is true for the standard on handler, as shown by the first example. However, when using event delegation (the #foo argument on the second click), currentTarget changes to be the inner button.

Why does the e.currentTarget change between the two scenarios? Specifically, in the latter case, does this mean that jQuery is not putting the event listener on the parent (#container) element?

• javascript
• jquery
• dom

Share Improve this question Follow edited Jul 5, 2017 at 16:54 intentionally-left-nil asked Jun 29, 2017 at 17:30 intentionally-left-nilintentionally-left-nil 8,34688 gold badges4040 silver badges6262 bronze badges 5

• In the second function, you're sorta telling jquery "Fire event when I click on an element with id="foo" that is nested somewhere in the element with id="container". Also, since you're pre-loading your html elements, and not inserting after the DOM loads, you don't need .on technically, and in the second function you can access element #foo without having to reference element #container first. – Aaron Eveleth Commented Jun 29, 2017 at 17:45
• Also, instead of using e.currentTarget you can use this. With vanilla JS you can change e.currentTarget.getAttribute('id') to this.id and to $(this).attr('id') in jQuery. – Aaron Eveleth Commented Jun 29, 2017 at 17:48
• @AaronEveleth: That is not my understanding of .on in jQuery. .on() should add a listener to any elements in the preceding selector. When you add a second parameter (aka to use event delegation), my understanding is that jQuery will not invoke the callback function unless the event.target matches the selector. – intentionally-left-nil Commented Jun 30, 2017 at 0:16
• With respect to this, my question is specifically about currentTarget. That property has specific semantics in the DOM. Either jQuery is modifying the currentTarget for some unknown reason, or the event handler is actually being bound differently than expected. – intentionally-left-nil Commented Jun 30, 2017 at 0:20
• From my understanding, when you pass a second selector, it bees the new event.CurrentTarget, relying on the first selector to have existed on initial DOM load if it was inserted after DOM load. – Aaron Eveleth Commented Jun 30, 2017 at 17:37

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7 +50

Basically it's because of jQuery magic behind the scenes. The jQuery event object that wraps the native event is changing the currentTarget, to be what might be more-convenient.

To access the value normally pointed to by currentTarget, jQuery events have delegateTarget.

This property is most often useful in delegated events attached by .delegate() or .on(), where the event handler is attached at an ancestor of the element being processed. It can be used, for example, to identify and remove event handlers at the delegation point.

For non-delegated event handlers attached directly to an element, event.delegateTarget will always be equal to event.currentTarget.

You can see that in the originalEvent, currentTarget has the value you would expect.

$('#container').on('click', function(e) {
    console.log('without delegation:');
    console.log('target: ' + e.target.getAttribute('id'));
    console.log('currentTarget: ' + e.currentTarget.getAttribute('id'));
    console.log('originalEvent.currentTarget: ' + e.originalEvent.currentTarget.getAttribute('id'));
    console.log('delegateTarget: ' + e.delegateTarget.getAttribute('id'));
    console.log('--');
});
$('#container').on('click', '#foo', function(e) {
    console.log('with delegation:');
    console.log('target: ' + e.target.getAttribute('id'));
    console.log('currentTarget: ' + e.currentTarget.getAttribute('id'));
    console.log('originalEvent.currentTarget: ' + e.originalEvent.currentTarget.getAttribute('id'));
    console.log('delegateTarget: ' + e.delegateTarget.getAttribute('id'));
    console.log('--');
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
    <button id="foo">Foo button</button>
    <button id="bar">Bar button</button>
</div>

To put it simply, the "#foo" is the current DOM element, as that is what you clicked on. It is simply a DOM element who's parent (or parent's parent, etc) happens to be "#container".

The answer to your question therefore is "The current DOM element within the event bubbling phase." [as per jQuery docs) is "#foo".

Likewise if you called $(document).on("click","#foo",... your currentTarget would also be "#foo".