event.target

event.target Dönen Değer : Eleman
Açıklama : Olayı başlatan DOM elemanı.

event.target Eklendiği versiyon 1.0

target özelliği olayın bağlandığı eleman ya da onun iç elemanlarından biri olup olayı yayan eleman olabilir. Olayın direk elemanda mı yoksa iç elemanlardan yayılma yoluyla gelip gelmediğini anlamak için event.target ve this nesnelerini karşılaştırmak yeterli olur. Delegasyon olarak bağlanan olaylarda olayın yayılma yoluyla geldiğini anlamak için çok işe yarar.


Örnekler:

Tıklanan elemanın tag'ini göster.

<style>
   span, strong, p {
      padding: 8px;
      display: block;
      border: 1px solid #999;
   }
</style>
<div id="log"></div>
<div>
  <p>
    <strong><span>tıkla</span></strong>
  </p>
</div>
<script>
$( "body" ).on( "click", function( event ) {
  $( "#log" ).html( "Tıklanan: " + event.target.nodeName );
});
</script>

tıkla


Bir liste elemanlarının alt listeleri var ve başlangıçta gizli , üst li elemana tıklanınca alt elemanlar toggle ile görünür-görünmez yapılır.

<ul>
  <li>eleman 1
    <ul> <li>alt eleman 1-a</li> <li>alt eleman 1-b</li> </ul>
  </li>
  <li>eleman 2
    <ul> <li>alt eleman 2-a</li> <li>alt eleman 2-b</li> </ul>
  </li>
</ul>
<script>
   function handler( event ) {
      var target = $( event.target );
      if ( target.is( "li" ) ) {
         target.children().toggle();
      }
   }
   $( "ul" ).on( "click", handler ).find( "ul" ).hide();
</script>
  • eleman 1
    • alt eleman 1-a
    • alt eleman 1-b
  • eleman 2
    • alt eleman 2-a
    • alt eleman 2-b

.

.