http://jsbin.com/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?