.trigger()

.trigger( eventType [, extraParameters ] ) Dönen Değer : jQuery Nesnesi

Açıklama : Eşleşen elemanlarda verilen olay tipi için tüm davranışları ve olay işleyicileri çalıştırır.

.trigger( eventType [, extraParameters ] )

eventType
Tip : String
JavaScript olay tipi içeren string, click veya submit gibi.

extraParameters
Tip : Array veya Düz Nesne
Olay işleyiciye aktarılacak ilave parametreler.

.trigger( event [, extraParameters ] )

event
Tip : Event
Bir jQuery.Event nesnesi.

extraParameters
Tip : Array veya Düz Nesne
Olay işleyiciye aktarılacak ilave parametreler.

.on() metodu ya da onun kısa yollarından biriyle tanımlanan olay işleyiciler tetiklenerek olay olmuş gibi davranması sağlanır. Olay manual tetiklenebileceği gibi .trigger() ile de tetiklenebilir. .trigger() ile tetiklenen olay aynı doğal yolla tetiklendiği gibi davranır.

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

Versiyon 1.3 ile .trigger() ile tetiklenen olaylar DOM ağacında yukarıya yayılırlar. Bir olay işleyicinin olayı üst elemanlara yaymasını handler metoddan false değer dönerek ya da olaya iliştirilen olay işleyici fonksiyon içinde event.stopPropagation() metodunu çağırarak engellersiniz.

.on() metodu ile özel olay tipi tanımladığımızda , .trigger() metoduna vereceğimiz ikinci parametre faydalı olabilir. Örneğin yukarıda gösterdiğimiz koddaki click olayı yerine custom özel olayını tanımlarsak ikinci parametreden şöyle yayrarlanabiliriz:

$( "#foo" ).on( "custom", function( event, param1, param2 ) {
   alert( param1 + "\n" + param2 );
});
$( "#foo").trigger( "custom", [ "Custom", "Event" ] );

Bir olay işleyicide ilk parametrede her zaman olay nesnesi gelir. .trigger() ile bir array içinde verilen parametreler, olay işleyiciye event nesnesinden sonra sırayla virgülle ayrılmış şekilde verilir. Versiyon 1.6.2 ile tek string ya da sayı değer array içine konmadan verilebilir.

Not : Extra parametreler ile .on() metodunda verilen eventData parametresi arasındaki fark, olayın tetiklendiği ana özel bilgi gerekirse olur. eventData olay işleyiciyi ilk bağlarken oluşan bir değer, ama .trigger() parametresi ise olayın gerçekleştiği andaki bilgileri kullanabilir.

Not : window'dan başka DOM nesneleri ve düz nesneler için eğer tetiklenen olay adı nesne özelliklerinden birinin adı ile aynı olursa, jQuery bu özelliği bir metod olarak çağırmaya çalışır (eğer olay işleyicide event.preventDefault() çağrılmamışsa ). Eğer bu davranışı istemiyorsanız bu metod yerine .triggerHandler() metodu kullanınız.

.triggerHandler() gibi .trigger() metodunu kullanmak, eğer olay tetiklenen nesnede olay adının başına on getirildiğinde oluşan isimle aynı isimde bir metod varsa, jQuery o metodu çağırır. Örneğin window nesnesinde click olayı tetikleniyorsa ve nesnede bir onclick metodu tanımlıysa jQuery onu da çağırır.

Not : Array olmayan bir düz nesne parametreyle tetikleme yapılıyorsa ve o düz nesne içinde length özelliği varsa parametreyi bir array içinde vermelisiniz. Örnek [ { length: 1 } ].

Örnekler:

Buton #2'yi tıklamak Buton #1'i tıklama kodunu da çalıştırır.

<style>
   button {
      margin: 10px;
   }
   div {
      color: blue;
      font-weight: bold;
   }
   span {
      color: red;
   }
</style>

<button>Buton #1</button>
<button>Buton #2</button>
<div><span>0</span> buton #1 click.</div>
<div><span>0</span> buton #2 click.</div>

<script>
   $( "button" ).first().on( "click", function() {
      update( $( "span" ).first() );
   } );
   
   $( "button" ).last().on( "click", function() {
      $( "button" ).first().trigger( "click" );
   update( $( "span" ).last() );
   } );
   
   function update( j ) {
      var n = parseInt( j.text(), 10 );
      j.text( n + 1 );
   }
</script>

0 buton #1 click.

0 buton #2 click.

İlk formu submit() fonksiyonu kullanmadan göndermek.

$( "form" ).first().trigger( "submit" );

İlk formu submit() fonksiyonu kullanmadan göndermek.

var event = jQuery.Event( "submit" );
$( "form" ).first().trigger( event );
if ( event.isDefaultPrevented() ) {
  // Perform an action...
}

Olaya isteğe bağlı değerler göndermek.

$( "p" )
   .on( "click", function( event, a, b ) {
      // fiziksel tıklama olursa, a ve b undefined gelir
      // aşağıdaki gibi ibr trigger tetiklemesinde a => "foo" ve b => "bar"
      // değerleri alır
   } )
   .trigger( "click", [ "foo", "bar" ] );

Olay nesnesine isteğe bağlı değer göndermek.

var event = jQuery.Event( "logged" );
event.user = "foo";
event.pass = "bar";
$( "body" ).trigger( event );

Olay nesnesine veri geçirmenin alternatif yolu.

$( "body" ).trigger({
  type:"logged",
  user:"foo",
  pass:"bar"
});