jQuery API

event.target

Categories: Events > Event Object

event.target Returns: Element

Description: The DOM element that initiated the event.

  • version added: 1.0event.target

The target property can be the element that registered for the event or a descendant of it. It is often useful to compare event.target to this in order to determine if the event is being handled due to event bubbling. This property is very useful in event delegation, when events bubble.

Examples:

Example: Display the tag's name on click 

<!DOCTYPE html>
<html>
<head>
  <style>
span, strong, p { 
  padding: 8px; display: block; border: 1px solid #999;  }
    </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
<div id="log"></div>
<div>
  <p>
    <strong><span>click</span></strong>
  </p>
</div>
<script>$("body").click(function(event) {
  $("#log").html("clicked: " + event.target.nodeName);
});  </script>

</body>
</html>

Demo:

Example: Implements a simple event delegation: The click handler is added to an unordered list, and the children of its li children are hidden. Clicking one of the li children toggles (see toggle()) their children. 

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
<ul>
  <li>item 1
    <ul>
      <li>sub item 1-a</li>
      <li>sub item 1-b</li>
    </ul>
  </li>
  <li>item 2
    <ul>
      <li>sub item 2-a</li>
      <li>sub item 2-b</li>
    </ul>
  </li>  
</ul>
<script>function handler(event) {
  var $target = $(event.target);
  if( $target.is("li") ) {
    $target.children().toggle();
  }
}
$("ul").click(handler).find("ul").hide();</script>

</body>
</html>

Demo:

Support and Contributions

Need help with event.target or have a question about it? Visit the jQuery Forum or the #jquery channel on irc.freenode.net.

Think you've discovered a jQuery bug related to event.target? Report it to the jQuery core team.

Found a problem with this documentation? Report it on the GitHub issue tracker

  • As

    asd

  • kox

    I want to get the html code that I selected. What’s my problem?
    $(‘p’).click(function(){
    alert(event.target.html());
    });

    • Ritch182

      $(‘p’).click(function(event){
      alert($(event.target).html());
      });

      should do it…also I don’t think this where you should be posting for help, it’s best to check the forums or the IRC channel.

  • Davdid

    I want to do something like
    ele_1.mousedown(function(e){
    if (e.ctrlKey) e.target=ele_1.find('.handler');
    else
    // do it the regular way
    });
    for a drag and drop event so that when the ctrl key is pressed, it internally drag something else to achieve something different.

    Is it possible?

  • Keo Daniel Bun

    I have an image inside a div. when the div is clicked it expands, when it is clicked again it shrinks, the div element is retrieved from event.target, rather than 'this', however when the image is also clicked it will also shrink and expand. So it seems event.target will ALSO apply to the children of event.target. is this a mistake?

  • Keo Daniel Bun

    I have an image inside a div. when the div is clicked it expands, when it is clicked again it shrinks, the div element is retrieved from event.target, rather than 'this', however when the image is also clicked it will also shrink and expand. So it seems event.target will ALSO apply to the children of event.target. is this a mistake?

  • Gatorlangman

    does not work in IE6, cmon jquery I thought you were supposed to be cross-compatiable.. none of the attr work either, esppecially img attribute in IE6. I realize IE6 sucks, but if your boss or client uses IE6 and they see the site doesnt work, good luck telling them its their problem and not yours…