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.