2010-09-16 17:13:38 +00:00
<!DOCTYPE html>
2010-11-02 01:46:29 +00:00
< html lang = 'en' > < head >
2011-02-18 20:00:18 +00:00
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, minimum-scale=1, maximum-scale=1" > < meta http-equiv = 'content-type' content = 'text/html; charset=UTF-8' / > < / head > < body >
2010-09-18 16:20:35 +00:00
< div data-role = "page" >
2010-09-21 14:58:54 +00:00
< div data-role = "header" >
2010-09-16 17:13:38 +00:00
< h1 > event.target< / h1 >
< / div >
2010-10-12 19:50:28 +00:00
< div data-role = "content" data-theme = "c" id = "event.target1" >
2010-09-16 17:13:38 +00:00
< h2 class = "jq-clearfix roundTop section-title" >
< span class = "name" > event.target< / span > < span class = "returns" > Returns: < a class = "return" href = "http://docs.jquery.com/Types#Element" > Element< / a > < / span >
< / h2 >
< div class = " entry-details" >
< p class = "desc" > < strong > Description: < / strong > The DOM element that initiated the event. < / p >
< ul class = "signatures" > < li class = "signature" id = "event.target" > < h4 class = "name" >
< span class = "versionAdded" > version added: < a href = "/category/version/1.0/" > 1.0< / a > < / span > event.target< / h4 > < / li > < / ul >
< div class = "longdesc" > < p > This can be the element that registered for the event or a child 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 > < / div >
< h3 > Examples:< / h3 >
< div id = "entry-examples" class = "entry-examples" >
< div id = "example-0" >
< h4 > Example: < span class = "desc" > Display the tag's name on click< / span >
< / h4 >
< pre > < code class = "example demo-code" > < !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> < / code > < / pre >
< h4 > Demo:< / h4 >
< div class = "demo code-demo" > < / div >
< / div >
< div id = "example-1" >
< h4 > Example: < span class = "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.< / span >
< / h4 >
< pre > < code class = "example demo-code" > < !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> < / code > < / pre >
< h4 > Demo:< / h4 >
< div class = "demo code-demo" > < / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / body > < / html >
