.bind() Metodu

.bind( eventType [, eventData ], handler ) Dönen Değer : jQuery Nesnesi
Kaldırıldığı versiyon 3.0 Açıklama : Seçilen elemanlara bir olay işleyici bağlar.

.bind( eventType [, eventData ], handler ) Eklendiği Versiyon: 1.0
eventType
Tip : String
Bir ya da daha fazla DOM olay tipini içeren string, "click" veya "submit" veya kullanıcı tanımlı olay ismi.
eventData
Tip : Herhangi birşey
Olay işleyiciye gönderilecek olan verilerin olduğu bir nesne.
handler
Tip : Fonksiyon( Olay eventObject )
Olay her tetiklendiğinde çalıştırılacak olan fonksiyon.
.bind( eventType [, eventData ] [, preventBubble ] ) Eklendiği Versiyon: 1.4.3
eventType
Tip : String
Bir ya da daha fazla DOM olay tipini içeren string, "click" veya "submit" veya kullanıcı tanımlı olay ismi.
eventData
Tip : Herhangi birşey
Olay işleyiciye gönderilecek olan verilerin olduğu bir nesne.
preventBubble
Tip : Boolean
Üçüncü parametreye false değer vermek seçili elemanın default olay işlemesini engelleyecek bir olay işleyiciyi otomatik olarak bağlar. Default değeri true.
.bind( events ) Eklendiği Versiyon: 1.4
events
Tip : Nesne
Bir ya da daha fazla DOM olay tipini ve onlara karşılık olay işleyici fonksiyonları içeren bir nesne.

JQuery 3.0 itibarıyla .bind() kaldırıldı. V1.7'den itibaren dökümana olay işleyiciler bağlamak için kullanılan .on() metoduna geçildi. Daha önceki versiyonlar için elemanlara direk olarak olay işleyici eklemek için .bind() metodu kullanılabilir. JQuery'de olay işleyiciler seçilmiş olan elemanlara bağlanır, bu durumda .bind() ile olay bağlanacak elemanların olay tanımı yapılırken dökümanda mevcut olması gerekir. Daha esnek olay bağlamaları için .on() metodunda delegasyonlu olay bağlamalarına bakabilirsiniz.

eventType değerinde her string değer olabilir, eğer olay tipi standart DOM olayı değilse kullanıcı tanımlı bir olay olarak bağlanır. Bu olaylar tarayıcı tarafından hiçbir zaman tetiklenemez, ama JavaScript kodunda .trigger() ve .triggerHandler() metodları ile tetiklenebilir.

Eğer eventType string içinde nokta karakteri varsa olay bir namespace içinde gruplanmıştır. Örneğin .bind( "click.name", handler ) komutunda click olay tipidir ve name stringi ise namespace'dir. Namespace vererek bir gruba topladığınız olayları diğerlerine dokunmadan iptal edebilme kolaylığı vardır. Ayrıntı için .unbind() metoduna bakabilirsiniz.

Bazı olayların kendilerine ait dökümanları var, bunların listesi için Olaylar Kategorisine bakınız.

Bir olay bir elemana eriştiğinde elemandaki o olaya ait tüm olay işleyiciler ateşlenir. Eğer birden fazla olay işleyici bağlanmışsa , kod çalışırken bağlanma sıralarına göre çağrılırlar. Tüm olay işleyiciler çalıştırıldıktan sonra olay üst elemanlara doğru normal yayılımına devam eder.

.bind() metodunun temel kullanımı :

$( "#foo" ).bind( "click", function() {
   alert( "Kullanıcı 'foo'ya tıkladı" );
});

Bu kod ID değeri foo olan elemanın click olayına cevap vermesini sağlar. Kullanıcı bu elemana tıkladığında bir mesaj alert ile verilir.

Çoklu Olaylar

Birden çok olaya bağlantı yapılacaksa olay tipleri aralarında boşluk vererek girilir.

$( "#foo" ).bind( "mouseenter mouseleave", function() {
   $( this ).toggleClass( "entered" );
});

Sayfada bir <div id="foo"> elemanımız olsun (başlangıçta da "entered" sınıfı olmasın). Mouse bu eleman üzerine getirilince "entered" değeri class değerlerine eklenir, mouse eleman dığına çıkarken tersi olur , yani class değerlerinden "entered" değeri çıkarılır.

JQuery 1.4 ile birçok olaya birçok olay işleyiciyi bir nesne içinde vererek bağlayabilme imkanı verildi.

$( "#foo" ).bind({
   click: function() {
      // click olayı işleyicisi
   },
   mouseenter: function() {
      // mouseenter olayı işleyicisi
   }
});

Olay İşleyiciler

handler parametresi yukarda gösterildiği gibi bir callback fonksiyon alır. Olay işleyici içinde this kelimesi olayın bağlandığı DOM elemanıdır. Bu elemanı jQuery metodları ile kullanmak için $() fonksiyonundan yardım alınır. Örneğin :

$( "#foo" ).bind( "click", function() {
   alert( $( this ).text() );
});

Bu kod çalıştırıldıktan sonra ID değeri "foo" olan elemana tıklanınca içeriğindeki yazı alert ile verilir. Burada $( this ) ile click olayının bağlandığı eleman jQuery metodları ile kullanılabiliyor.

JQuery 1.4.3 ile olay işleyici fonksiyon yerine false değeri girebilme imkanı verildi, bu aslında function(){ return false; } callback tanımının kısa hali olarak kabul edilir. Daha sonra bu bağlamayı iptal için .unbind( eventName, false ) kullanılabilir.

Event Nesnesi

Olay işleyici fonksiyon olan handler değerindeki fonksiyon da parametre alabilir. Fonksiyon çağrıldığında event nesnesi ilk parametrede fonksiyona geçirilir.

Event nesnesi genellikle kullanılmadığından olay işleyiciye parametre girmeden çağrılabilir. Ama olay ve kullanıcının ortamı hakkında daha fazla bilgiler gerektiğinde event nesnesi kullanılabilir. Ayrıntılı bilgi için Event Nesnesi dökümanına bakınız.

Bir olay işleyiciden false değeri dönmek olay nesnesinde hem .preventDefault() hem .stopPropagation() metodlarını çağırır.

Event nesnesini olay işleyicide kullanmak şuna benzer:

$( document ).ready(function() {
   $( "#foo" ).bind( "click", function( event ) {
      alert( "Mouse işaretçisi koordinatları (" +
         event.pageX + ", " + event.pageY +
         ")" );
   });
});

Anonim fonksiyona parametre verildiğini görüyorsunuz. Bu kod çalıştırıldıktan sonra ID değeri foo olan elemana tıklanınca alert mesajında mouse işaretçinin o andaki koordinatları gösterilir.

Olay Verilerini Göndermek

Opsiyonel eventData parametresinin kullanımı pek yaygın değilidr. Ama eğer verilirse bu parametre bize olay işleyiciye başka veriler gönderme imkanı sunar. En çok lazım olduğu yerlerden biri closure dediğimiz değerler. Örnek olarak harici bir değişkenin değerine başvuran iki olay işleyici düşünelim.

var message = "Spoon!";
$( "#foo" ).bind( "click", function() {
   alert( message );
});
message = "Not in the face!";
$( "#bar" ).bind( "click", function() {
   alert( message );
});

Her iki olay işleyici de örtülü değer (closure) olarak message değişkenini kullanıyor. Ama bu kod olay tanımlarını içeriyor ve olay gerçekleştiği anda message değişkeninde ne varsa her ikisi de o mesajı verecektir. Sadece gördüğümüz atamalar varsa her iki elemana da tıklanınca en son mesaj olan "Not in the face!" mesajı alert edilecektir. Bunu düzeltmek için olay bağlandığı andaki mesaj değerini eventData parametresi ile verebiliriz.

var message = "Spoon!";
$( "#foo" ).bind( "click", { msg: message }, function( event ) {
   alert( event.data.msg );
});
message = "Not in the face!";
$( "#bar" ).bind( "click", { msg: message }, function( event ) {
   alert( event.data.msg );
});

Bu şekilde olunca her olayın eventData değerinde kendi tanımlandığı andaki mesaj olacağı için her iki olay işleyici farklı mesaj verecektir.

Not: Nesneler fonksiyonlara parametre olarak verilirken referans olarak verilir , nesne değerlerle çalışırken senaryo karışabilir.

Eğer eventData verilecekse .bind() metodunda ikinci parametre olmalıdır. Eğer olay işleyiciye bir değer göndermek gerekmezse ikinci parametrede olay işleyici fonksiyon olur ve başka parametre verilmez.

Eğer dışardan tetiklemeyi .trigger() ile yapacaksanız sadece o tetiklemeye özel parametreler için metodun açıklamasına bakınız.

Not : Aşağıdaki örnekteki gibi aynı elemana hem click hem dblclick olayları bağlanırsa kullanılan tarayıcıya göre farklı davranış oluşabilir. Kimi tarayıcılar iki defa tek tıklama olayı oluştururken kimisi bir tane çift tıklama olayı oluşturur.


Örnekler:

Paragraf için tıklama ve çift tıklama olayları bağla.

<style>
   p {
      background: yellow;
      font-weight: bold;
      cursor: pointer;
      padding: 5px;
   }
   p.over { background: #ccc; }
   span { color: red; }
</style>

<p>Click or double click here.</p>
<span></span>
 
<script>
   $( "p" ).bind( "click", function( event ) {
      var str = "( " + event.pageX + ", " + event.pageY + " )";
      $( "span" ).text( "Click happened! " + str );
   });
   $( "p" ).bind( "dblclick", function() {
      $( "span" ).text( "Double-click happened in " + this.nodeName );
   });
   $( "p" ).bind( "mouseenter mouseleave", function( event ) {
      $( this ).toggleClass( "over" );
   });
</script>

Click or double click here.


Tüm paragraflara tıklanınca içlerindeki yazıyı alert eden olay işleyici bağla.

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

Olay işleyiciden önce bazı verileri girebilirsiniz.

function handler( event ) {
   alert( event.data.foo );
}
$( "p" ).bind( "click", {
   foo: "bar"
   }, handler );

Fonksiyondan false değer dönerek elemanın default aksiyonunu ve olayı yukarı doğru yaymasını engelleyebilirsiniz.

$( "form" ).bind( "submit", function() {
   return false;
})

Sadece default aksiyonu engellemek içinse .preventDefault() metodu kullanılabilir.

$( "form" ).bind( "submit", function( event ) {
   event.preventDefault();
});

Default aksiyonu engellemeden olayın yukarı doğru yayılmasını (bubling) engellemek için .stopPropagation() metodu kullanılır.

$( "form" ).bind( "submit", function( event ) {
   event.stopPropagation();
});

Kullanıcı tanımlı olay bağlamak.

<style>
   p { color: red; }
   span { color: blue; }
</style>

<p>Özel tanımlı olay bağlanmış eleman.</p>
<button>Özel olayı tetikle</button>
<span style="display: none;"></span>
 
<script>
   $( "p" ).bind( "myCustomEvent", function( e, myName, myValue ) {
      $( this ).text( "Merhaba " + myName + "!" );
      $( "span" ).stop()
         .css( "opacity", 1 )
         .text( "myName = " + myName )
         .fadeIn( 30 )
         .fadeOut( 1000 );
      });
   $( "button" ).on( "click", function() {
      $( "p" ).trigger( "myCustomEvent", [ "John" ] );
   });
</script>

Özel tanımlı olay bağlanmış eleman.


Birçok olay işleyicisi bağlamayı aynı anda da yapabilirsiniz.

$( "div.test" ).bind({
   click: function() {
      $( this ).addClass( "active" );
   },
   mouseenter: function() {
      $( this ).addClass( "inside" );
   },
   mouseleave: function() {
      $( this ).removeClass( "inside" );
   }
});

.

.