title: Difference between $(this) and event.target?
body: <p>I'm new to jQuery, and was making tabbed panels, following the tutorial in <strong>JavaScript and jQuery : The Missing Manual</strong>, there's that first line when the author does this :</p>
  <pre><code>   var target = $(this);
  </code></pre>
  <p>But I tried to do it that way</p>
  <pre><code>   var target = evt.target;
  </code></pre>
  <p>and I got that error :</p>
  <blockquote>
  <p>Uncaught TypeError: Object http://localhost/tabbedPanels/#panel1 has no method 'attr'</p>
  </blockquote>
  <p>And when I changed <code>evt.target</code> back to <code>$(this)</code>, it worked like a charm.</p>
  <p>I want to know what's the difference between <code>$(this)</code> and <code>evt.target</code> ?</p>
  <p>Here's my code in case you needed it :</p>
  <p><strong>index.html :</strong></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Tabbed Panel&lt;/title&gt;
          &lt;style&gt;
              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;
              }         
              
          &lt;/style&gt;
          &lt;script type=&quot;text/javascript&quot; src=&quot;jquery-1.8.0.min.js&quot;&gt;&lt;/script&gt;
          &lt;script type=&quot;text/javascript&quot; src=&quot;script.js&quot;&gt;&lt;/script&gt;        
      &lt;/head&gt;
      
      &lt;body&gt;
          &lt;div id=&quot;wrapper&quot;&gt;
              &lt;div id=&quot;tabsContainer&quot;&gt;
                  &lt;ul id=&quot;tabs&quot;&gt;
                      &lt;li&gt;&lt;a href=&quot;#panel1&quot;&gt;Panel1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;#panel2&quot;&gt;Panel2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;#panel3&quot;&gt;Panel3&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;#panel4&quot;&gt;Panel4&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div id=&quot;panelsContainer&quot;&gt;
                  &lt;div id=&quot;panel1&quot; class=&quot;panel&quot;&gt;
                      this is panel1
                  &lt;/div&gt;
                  &lt;div id=&quot;panel2&quot; class=&quot;panel&quot;&gt;
                      this is panel2
                  &lt;/div&gt;
                  &lt;div id=&quot;panel3&quot; class=&quot;panel&quot;&gt;
                      this is panel3
                  &lt;/div&gt;
                  &lt;div id=&quot;panel4&quot; class=&quot;panel&quot;&gt;
                      this is panel4
                  &lt;/div&gt;                
              &lt;/div&gt;
          &lt;/div&gt;
          
      &lt;/body&gt;
      
  &lt;/html&gt;
  </code></pre>
  <p><strong>script.js :</strong></p>
  <pre><code>$(function(){
      $(&quot;#tabs a&quot;).click(function(evt){
         var target = evt.target,
             targetPanel = target.attr(&quot;href&quot;);
         $(&quot;.panel&quot;).hide();
         $(&quot;#tabs a.active&quot;).removeClass(&quot;active&quot;);
         target.addClass(&quot;active&quot;).blur();
         $(targetPanel).fadeIn(300);
         evt.preventDefault();
      });
      
      $(&quot;#tabs a:first&quot;).click();
  })
  </code></pre>