{"name":"event.target","type":"property","title":"event.target","deprecated":null,"removed":null,"desc":" The DOM element that initiated the event.  ","categories":["events/event-object","version/1.0"],"entries":[{"return":"Element","signatures":{"added":"1.0"},"examples":[{"desc":"Display the tag's name on click","code":"\n$( \"body\" ).click(function( event ) {\n  $( \"#log\" ).html( \"clicked: \" + event.target.nodeName );\n});\n","css":"\n  span, strong, p {\n    padding: 8px;\n    display: block;\n    border: 1px solid #999;\n  }\n","html":"\n<div id=\"log\"></div>\n<div>\n  <p>\n    <strong><span>click</span></strong>\n  </p>\n</div>\n"},{"desc":"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.","code":"\nfunction handler( event ) {\n  var target = $( event.target );\n  if ( target.is( \"li\" ) ) {\n    target.children().toggle();\n  }\n}\n$( \"ul\" ).click( handler ).find( \"ul\" ).hide();\n","html":"\n<ul>\n  <li>item 1\n    <ul>\n      <li>sub item 1-a</li>\n      <li>sub item 1-b</li>\n    </ul>\n  </li>\n  <li>item 2\n    <ul>\n      <li>sub item 2-a</li>\n      <li>sub item 2-b</li>\n    </ul>\n  </li>\n</ul>\n"}],"longdesc":"\n    <p>The <code>target</code> property can be the element that registered for the event or a descendant of it.  It is often useful to compare <code>event.target</code> to <code>this</code> 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.</p>\n  "}]}