## 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:

Display the tag's name on click

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
    <!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>event.target demo</title>  <style>  span, strong, p {    padding: 8px;    display: block;    border: 1px solid #999;  }  </style>  <script src="https://code.jquery.com/jquery-1.10.2.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:

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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
    <!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>event.target demo</title>  <script src="https://code.jquery.com/jquery-1.10.2.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: