.delegate()

.delegate( selector, eventType, handler ) Dönen Değer : jQuery Nesnesi

Açıklama : Seçimden gelen bir ya da daha fazla elemanın bir ya da daha fazla olayına bir olay işleyici bağlar.

.delegate( selector, eventType, handler )

selector
Tip : String
Seçilmiş elemanların olayı tetikleyen alt elemanlarını bulmak için seçici filtre.

eventType
Tip : String
Bir ya da birden fazla JavaScript olay tipinin boşlukla ayrılmış şekilde oluşturduğu string. "click" veya "keydown" veya kullanıcı tanımlı olay ismi gibi.

handler
Tip : Fonksiyon( Olay eventObject )
Olay her tetiklendiğinde çalıştırılacak olan fonksiyon.

.delegate( selector, eventType, eventData, handler )

selector
Tip : String
Seçilmiş elemanların olayı tetikleyen alt elemanlarını bulmak için seçici filtre.

eventType
Tip : String
Bir ya da birden fazla JavaScript olay tipinin boşlukla ayrılmış şekilde oluşturduğu string. "click" veya "keydown" veya kullanıcı tanımlı olay ismi gibi.

eventData
Tip : Herhangi birşey
Olay işleyiciye gönderilmek istenen verileri içeren bir nesne.

handler
Tip : Fonksiyon( Olay eventObject )
Olay her tetiklendiğinde çalıştırılacak olan fonksiyon.

.delegate( selector, events )

selector
Tip : String
Seçilmiş elemanların olayı tetikleyen alt elemanlarını bulmak için seçici filtre.

events
Tip : Düz Nesne
Bir ya da daha fazla olay tipi ve onlara karşı işlenecek olan olay işleyici tanımları içieren nesne.

JQuery versiyon 3.0'la beraber .delegate() metodu kaldırıldı. Versiyon 1.7'den beri .on() metodu kullanılması tercih ediliyor. Daha önceki versiyonlar içinse etkili bir olay tanımlama metodudur. .on() metodunda olay bağlamanın teknikleri ayrıntılı görülebilir. Aynı teknikleri kullandığı için bu metodlar kaldırılmıştır.

// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, selector, data, handler );

Örneğin aşağıdaki .delegate() kodu,

$( "table" ).delegate( "td", "click", function() {
  $( this ).toggleClass( "chosen" );
});

.on() metodu kullanan şu kodla eşleniktir:

$( "table" ).on( "click", "td", function() {
  $( this ).toggleClass( "chosen" );
});

.delegate() ile eklenen olayları iptal etmek için .undelegate() metodunu kullanırsınız.

data ile verilen verinin ayrıştırması .on() metodu gibidir.

Örnekler:

Bir paragrafa tıklayarak yeni bir tane oluştur ve o da tıklanabilsin.

<style>
   p {
      background: yellow;
      font-weight: bold;
      cursor: pointer;
      padding: 5px;
   }
</style>
<p>Bana Tıkla!</p>
<script>
   $( "body" ).delegate( "p", "click", function() {
      $( this ).after( "<p>İlave paragraf!</p>" );
   });
</script>

Bana Tıkla!

Her paragrafa tıklandığında içindeki yazıyı alert popup'a çıkarmak.

$( "body" ).delegate( "p", "click", function() {
  alert( $( this ).text() );
});

Elemanın default olayını iptal etmek ve olayın üst elemanlara aktarımını da önlemek için return false; kullanın.

$( "body" ).delegate( "a", "click", function() {
  return false;
});

Sadece elemanın default olayını iptal için .preventDefault() metodu kullanın.

$( "body" ).delegate( "a", "click", function( event ) {
  event.preventDefault();
});

Kullanıcı tanımlı olaylar da bağlanabilir.

<style>
   p {
      color: red;
   }
   span {
      color: blue;
   }
</style>
<p>Özel olay tanımlanmış.</p>
<button>Özel olayı tetikle</button>
<span style="display:none;"></span>
 
<script>
   $( "body" ).delegate( "p", "myCustomEvent", function( e, myName, myValue ) {
      $( this ).text( "Merhaba!" );
      $( "span" )
         .stop()
         .css( "opacity", 1 )
         .text( "myName = " + myName )
         .fadeIn( 30 )
         .fadeOut( 1000 );
   });
   $( "button" ).on( "click", function() {
      $( "p" ).trigger( "myCustomEvent" );
   });
</script>

Özel olay tanımlanmış.