e.target vs this in delegated events
When attaching click handlers to elements, I used to think I could use e.target
interchangeably with this
. That is not true when we use event delegation.
Given the following JS:
$('body').on('click', "[id^=delete_thing]", function(e){
// do stuff
});
And the following HTML:
<a href="javascript:void(0)" id="delete_thing_184">
<img src="/assets/ui/icon_delete.png">
<strong> Delete Thing </strong>
</a>
When we click this link, we're actually clicking either the <strong>
or the <img>
. When the event e
is passed to the callback, e.target
is the element we actually clicked, and this
is the element the click event bubbled up to, so use this
instead of e.target.parent
.