There is a difference between $(this)
and event.target
, and quite a significant one. While this
(or event.currentTarget
, see below) always refers to the DOM element the listener was attached to, event.target
is the actual DOM element that was clicked. Remember that due to event bubbling, if you have
<div class="outer">
<div class="inner"></div>
</div>
and attach click listener to the outer div
$('.outer').click( handler );
then the handler
will be invoked when you click inside the outer div as well as the inner one (unless you have other code that handles the event on the inner div and stops propagation).
In this example, when you click inside the inner div, then in the handler
:
this
refers to the .outer
DOM element (because that's the object to which the handler was attached)event.currentTarget
also refers to the .outer
element (because that's the current target element handling the event)event.target
refers to the .inner
element (this gives you the element where the event originated)The jQuery wrapper $(this)
only wraps the DOM element in a jQuery object so you can call jQuery functions on it. You can do the same with $(event.target)
.
Also note that if you rebind the context of this
(e.g. if you use Backbone it's done automatically), it will point to something else. You can always get the actual DOM element from event.currentTarget
.