jQuery ile event tetikleme işlemini trigger fonksiyonu ile gerçekleştiriyoruz trigger fonksiyonunun kullanımı ve örneklerine makalenin devamından ulaşabilirsiniz.
jQuery ile event tetikleme
Bu makalemizde trigger fonksiyonunu kullanarak nesnelerin event’ini tetikleyeceğiz. Şimdi basit bir örnekle olayı anlamaya çalışalım.
Syntax
1 | .trigger( event [, extraParameters ] ) |
trigger fonksiyonu için ilk olarak event adı ikinci opsiyonel parametreye’de tetiklenecek event için diğer ekstra parametreler giriliyor.
Örnek 1
1 2 3 4 | $( "#foo" ).on( "click", function() { alert( $( this ).text() ); }); $( "#foo" ).trigger( "click" ); |
Üstteki kodda #foo id’li nesnenin click olayını tetiklemiş oluyoruz. tetikleme sonucunda ise #foo nesnesindeki metin ekrana uyarı olarak veriliyor.
Örnek 2
1 2 3 4 | $( "#foo" ).on( "custom", function( event, param1, param2 ) { alert( param1 + "n" + param2 ); }); $( "#foo").trigger( "custom", [ "Custom", "Event" ] ); |
Üstteki kodda custom event tetikleniyor ve ekstra parametreler giriliyor bunun sonucunda ekrana Custom Event şeklinde bir uyarı çıkıyor.
Son olarak bir örnek ile bilgimizi pekiştirelim ve sayfanın en altındaki Sonuç kısmından örneğimize ait sonuçu Result sekmesinden görebilirsiniz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>trigger demo</title> <style> button { margin: 10px; } div { color: blue; font-weight: bold; } span { color: red; } </style> <script src="http://code.jquery.com/jquery-1.10.2.js"></ script> </head> <body> <button>Button #1</button> <button>Button #2</button> <div><span>0</span> button #1 clicks.</div> <div><span>0</span> button #2 clicks.</div> <script> $( "button:first" ).click(function() { update( $( "span:first" ) ); }); $( "button:last" ).click(function() { $( "button:first" ).trigger( "click" ); update( $( "span:last" ) ); }); function update( j ) { var n = parseInt( j.text(), 10 ); j.text( n + 1 ); } |
