Jquery - $(this) 和 event.target 的区别

摘自stackoverflow. 待翻译

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 such a case, inside the handler, this (and event.currentTarget) would refer to the .outerDOM element, and event.target would refer to the .inner element.

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.