Difference between this and event target

Question

I m new to jQuery  and 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    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   script js     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

User · Answer

this  refers to the DOM object to which the event listener has been attached   event target  refers to the DOM object for which the event listener got triggered  A natural question arises as  why the event listener is triggering for other DOM objects  This is because event listener attached parent triggers for child object too

User · Answer

http   api jquery com on  states      When jQuery calls a handler  the this keyword is a reference to the   element where the event is being delivered  for directly bound events   this is the element where the event was attached and for delegated   events this is an element matching selector   Note that this may not   be equal to event target if the event has bubbled from a descendant   element         To create a jQuery object from the element so that it can be   used with jQuery methods  use    this      If we have    lt input type  button  class  btn  value   btn1  gt   lt input type  button  class  btn  value   btn2  gt   lt input type  button  class  btn  value   btn3  gt    lt div id  outer  gt       lt input type  button   value   OuterB  id   OuterB  gt       lt div id  inner  gt           lt input type  button  class  btn  value   InnerB  id   InnerB  gt       lt  div gt   lt  div gt    Check the below output    lt script gt        function                btn   on  click  function event               console log   this                console log   event currentTarget                console log   event target                              outer   on  click  function event               console log   this                console log   event currentTarget                console log   event target                       lt  script gt    Note that I use   to wrap the dom element in order to create a jQuery object  which is how we always do   You would find that for the first case  this  event currentTarget event target are all referenced to the same element   While in the second case  when the event delegate to some wrapped element are triggered  event target would be referenced to the triggered element  while this and event currentTarget are referenced to where the event is delivered    For this and event currentTarget  they are exactly the same thing according to http   api jquery com event currenttarget

User · Answer

There is a significant different in how jQuery handles the this variable with a  on  method     outer DOM element   on  click   inner DOM element  function        this     refers to the  inner DOM element       If you compare this with  -     outer DOM element   click function        this     refers to the  outer DOM element

User · Answer

Within an event handler function or object method  one way to access the properties of  the containing element  is to use the special this keyword  The this keyword represents the owner of the function or method currently being processed  So    For a global function  this represents the window  For an object method  this represents the object instance   And in an event handler  this represents the element that received the event    For example    lt  DOCTYPE html gt   lt html gt       lt head gt           lt script gt          function mouseDown                 alert this                      lt  script gt       lt  head gt       lt body gt           lt p onmouseup  mouseDown   alert this    gt Hi lt  p gt       lt  body gt   lt  html gt    The content of alert windows after rendering this html respectively are   object Window object HTMLParagraphElement   An Event object is associated with all events  It has properties that provide information  about the event   such as the location of a mouse click in the web page    For example    lt  DOCTYPE html gt   lt html gt       lt head gt           lt script gt          function mouseDown event                var theEvent   event   event   window event              var locString    X       theEvent screenX     Y       theEvent screenY              alert event                       alert locString                      lt  script gt       lt  head gt       lt body gt           lt p onmouseup  mouseDown event    gt Hi lt  p gt       lt  body gt   lt  html gt    The content of alert windows after rendering this html respectively are   object MouseEvent X   982 Y   329

User · Answer

this is a reference for the DOM element for which the event is being handled  the current target   event target refers to the element which initiated the event  They were the same in this case  and can often be  but they aren t necessarily always so   You can get a good sense of this by reviewing the jQuery event docs  but in summary      event currentTarget      The current DOM element within the event bubbling   phase       event delegateTarget      The element where the currently-called jQuery   event handler was attached       event relatedTarget      The other DOM element involved in the event  if any       event target      The DOM element that initiated the event    To get the desired functionality using jQuery  you must wrap it in a jQuery object using either    this  or   evt target    The  attr   method only works on a jQuery object  not on a DOM element    evt target  attr  href   or simply evt target href will give you what you want

User · Answer

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   lt div class  outer  gt     lt div class  inner  gt  lt  div gt   lt  div gt    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

User · Answer

There are cross browser issues here   A typical non-jQuery event handler would be something like this    function doSomething evt        evt   evt    window event      var target   evt target    evt srcElement      if  target nodeType    3     defeat Safari bug         target   target parentNode        do stuff here     jQuery normalises evt and makes the target available as this in event handlers  so a typical jQuery event handler would be something like this    function doSomething evt        var  target     this         do stuff here     A hybrid event handler which uses jQuery s normalised evt and a POJS target would be something like this    function doSomething evt        var target   evt target    evt srcElement      if  target nodeType    3     defeat Safari bug         target   target parentNode        do stuff here

[jquery] Difference between $(this) and event.target?

Examples related to jquery

Examples related to this

Examples related to jquery-events