Имя может быть именем элемента, зарегистрировавшего событие или имя дочернего элемента. Использование данного метода полезно для сравнения event.target с this для определения порядка, если событие было перехвачено обработчиком вследствие всплытия. Так же данное свойство полезно при делегировании события в процессе его всплытия.
Пример:
<div id="log"></div>
<div>
<p>
<strong><span>click</span></strong>
</p>
</div>
div.parent {background-color: #eef; width:200px;height:200px;}
div div { padding: 20px; background-color: red; width:100px;height:100px;}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("body").click(function(event) { $("#log").html("clicked: " + event.target.nodeName); }); }); </script> </head> <body class="iframe"> <div id="log"></div> <div> <p> <strong><span>click</span></strong> </p> </div> </body> </html> <style> div.parent {background-color: #eef; width:200px;height:200px;} div div { padding: 20px; background-color: red; width:100px;height:100px;} </style>
Пример:
function handler(event) {
var $target = $(event.target);
if( $target.is("li") ) {
$target.children().toggle();
}
}
$("ul").click(handler).find("ul").hide();
<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>
div.parent {background-color: #eef; width:200px;height:200px;}
div div { padding: 20px; background-color: red; width:100px;height:100px;}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ function handler(event) { var $target = $(event.target); if( $target.is("li") ) { $target.children().toggle(); } } $("ul").click(handler).find("ul").hide(); }); </script> </head> <body class="iframe"> <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> </body> </html> <style> div.parent {background-color: #eef; width:200px;height:200px;} div div { padding: 20px; background-color: red; width:100px;height:100px;} </style>