Difference between $(this) and event.target?

jquery, jquery-events, this

Solution

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`.

Problem

I was making tabbed panels, following the tutorial in JavaScript and jQuery : The Missing Manual, there's that first line when the author does this: ``` var target = $(this); ``` But I tried to do it that way ``` var target = evt.target; ``` and I got that error : Uncaught TypeError: Object http://localhost/tabbedPanels/#panel1 has no method 'attr' And when I changed `evt.target` back to `$(this)`, it worked like a charm. I want to know what's the difference between `$(this)` and `evt.target` ? Here's my code in case you needed it : index.html : ``` <!DOCTYPE html> <html> <head> <title>Tabbed Panel</title> <style> body { width : 100%; height: 100%; } #wrapper { margin : auto; width : 800px; } #tabsContainer { overflow: hidden; } #tabs { padding:0; margin:0; } #tabs li { float : left; list-style:none; } #tabs a { text-decoration:none; padding : 3px 5px; display : block; } #tabs a.active { background-color : grey; } #panelsContainer { clear: left; } #panel1 { color : blue; } #panel2 { color : yellow; } #panel3 { color: green; } #panel4 { color : black; } </style> <script type="text/javascript" src="jquery-1.8.0.min.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="wrapper"> <div id="tabsContainer"> <ul id="tabs"> <li><a href="#panel1">Panel1</a></li> <li><a href="#panel2">Panel2</a></li> <li><a href="#panel3">Panel3</a></li> <li><a href="#panel4">Panel4</a></li> </ul> </div> <div id="panelsContainer"> <div id="panel1" class="panel"> this is panel1 </div> <div id="panel2" class="panel"> this is panel2 </div> <div id="panel3" class="panel"> this is panel3 </div> <div id="panel4" class="panel"> this is panel4 </div> </div> </div> </body> </html> ``` script.js : ``` $(function(){ $("#tabs a").click(function(evt){ var target = evt.target, targetPanel = target.attr("href"); $(".panel").hide(); $("#tabs a.active").removeClass("active"); target.addClass("active").blur(); $(targetPanel).fadeIn(300); evt.preventDefault(); }); $("#tabs a:first").click(); }) ```

Original source