Bu yazımızda, Olay Fonksiyonlarında, olay tutuculardan (Event Handlers) ".on()" yapısından bahsedeceğiz, ve küçük bir uygulama yapacağız.
on() ve off() fonksiyonları, jQuery 1.7 sürümü ile gelen, hemen hemen tüm olay tutucuların (.bind(),.delegate(), .live() vb.) özelliklerini yapmak için tasarlanmış bir yapıdır. Muhtemelen bu yapının oturmasıyla, diğer olay tutucular sonraki sürümlerde yavaş yavaş kaldırılacaktır.
Olay Fonksiyonları- Olay Tutucular (Event Handlers):
- .on() //"1.7 sürümü" ile dahil edilmiştir, hemen hemen diğer tutucuların tüm özelliklerini yerine getirebilir bir yapıdadır.
- .off() //"1.7 sürümü" ile dahil edilmiştir, "unbind()" gibi "on()" fonksiyonu ile verilmiş olayları iptal eder.
- .bind() //Nesneye olay tetikleyici atar.
- .unbind() //Bind ile verilen olayları iptal eder.
- .live() ) //.bind() gibi nesneye olay tetikleyici atar, fakat en önemli farkı jQuery veya javascript ile sayfaya sonradan eklenen nesneleri de görür ve olay tetikleme işini bunlarla da gerçekleştirir.
- .die() //live metodu ile atanan olayları iptal eder.
- .one() //Olayın sadece bir kere gerçekleşmesini sağlar.
- $.proxy //İstenilen nesnenin istenilen olay yardımcısını tetiklemeyi sağlar.
- .trigger() //Herhangi bir nesneye parametreler ve fonksiyonlar eklemeye yarar.
- .unbind() //Bind ile verilen olayları iptal eder.
Uygulama:
Hedefimiz, liste nesnesine yeni eleman (li) eklemek ve tıklanan liste (li) elemanının içeriğini uyarı mesajı olarak vermek.
CSS yapısı:
#area_product{
position:relative;
width:600px;
height:200px;
border-bottom:1px solid green;
border:1px solid green;
margin-bottom:5px;
padding:10px;
clear:both;
}
HTML yapısı:
<button id="ekle_on">Liste ekle</button>
<ul id="liste_on">
<li><a href="#">Satır 1</a></li>
<li><a href="#">Satır 2</a></li>
<li><a href="#">Satır 3</a></li>
</ul>
JQuery yapısı:
<script type="text/javascript">
$(document).ready(function(){
//butona basınca olay tetikleniyor
$('#ekle_on').click(function(){
//Son "li" elamanının index değeri alınıyor
var son=$('#liste_on li:last').index();
//Yeni liste elemanının en sona ekliyoruz
$('#liste_on').append('<li><a href="#">Satır '+(son+2)+'</a></li>');
});
//on() yapısı ile #liste_on id'li nesnenin li a nesnesi
//click olayıyla ilişkilendiriliyor
$('#liste_on').on("click","li a",function(){
alert($(this).text()+" Tıklandı");
});
});
</script>
Açıklamalar:
- 5. Butona basılınca "click" olayı tetikleniyor
- 8. #liste_on id'li listenin son "li" elemanının "index" değeri alınıyor,
- 11. Yeni liste elemanı oluşturulup listenin sonuna ekleniyor
- 16. #liste_on id'li listenin, "on()" yapısıyla, "li a" elemanının "click" olayıyla ilişkilendirilmesi sağlanıyor
- 17. Tıklanan liste elemanının içeriği uyarı mesajı olarak gösteriliyor.
Kolay gelsin, görüşmek üzere...
