Bu yazımızda, Olay Fonksiyonlarında, olay tutuculardan (Event Handlers) bahsedeceğiz, olay tutucuları, herhangi bir nesneye olay(click, mouseover, meouseenter, mouseleave vb.) atamak için kullanılan yapılardır.
Aslında jQuery 1.7 sürümü ile gelen on() ve off() fonksiyonları, hemen hemen tüm olay tutucuların (.bind(),.delegate(), .live() vb.) özelliklerinin yapmak için tasarlanmıştır, muhtemelen bu yapının oturmasıyla, diğer olay tutucular sonraki sürümlerde yavaş yavaş kaldırılacaktır.
Fakat biz gene de tüm olay tutucuları şöyle bir gözden geçirelim ve farkları üzerine odaklanalım, daha sonra da önceki dersimizde javascript kullanarak yapmış olduğumuz uygulamanın bir benzerini "bind()" kullanarak yapalım
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.
".live()" fonksiyonu 1.9 sürümünden itibaren kaldırılmıştır, bu fonksiyonun yerine ".on()" fonksiyonunun kullanılması gerekir
- .die() //live metodu ile atanan olayları iptal eder.
".die()" fonksiyonu 1.9 sürümünden itibaren kaldırılmıştır, bu fonksiyonun yerine ".off()" fonksiyonunun kullanılması gerekir
- .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, bir alanın arkaplan renginin, yazı rengini ve font boyutunun seçimini kullanıcıya bırakmak... Yaptığı seçimlerle bu değerleri kendi belirleyecek.
Bu yazının font ve renk değeri değişecek...
Bu uygulamamızda, seçimleri sadece bir alan için yaptık ama bunu tüm arkaplan için de yapabilirsiniz.
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ı:
<div id="area_product">
<p id="changeColor">Bu yazının font ve renk değeri değişecek...</p>
</div>
<select name="themes" id="themes">
<option value="white:black:12" selected="selected">ArkaPlan, Yazı Rengi, Font Boyutu Seçiniz...</option>
<option value="black:white:16">Siyah Beyaz 16</option>
<option value="green:blue:24">Yeşil Mavi 24</option>
<option value="orange:white:14">Turuncu Beyaz 14</option>
</select>
Bir alanımız var, içinde bir yazı ve bir adet dropdown menümüz var, seçim yapılınca "onchange" olayı (event) tetikleniyor, gönderilen değerlar: Alanın arkaplan rengi, paragrafın font rengi ve font boyutu.
JQuery yapısı:
<script type="text/javascript">
$(document).ready(function(){
//Select box değiştiğinde olay tetikleniyor
$("#themes").bind('change',function(){
//Gelen option değeri split ile (:) işaretiyle parçalanıp
//css_values dizisi olarak atanıyor
var css_values=($(this).val()).split(":");
//Alanın arka plan rengi
sel_bg_color=css_values[0];
//Paragrafın yazı rengi
sel_fg_color=css_values[1];
//Paragrafın yazı boyutu
sel_font_size=css_values[2]+"px";
//Alanın yeni arka plan rengi veriliyor
$("#area_product").css('background-color',sel_bg_color);
//Paragrafın yeni değerleri veriliyor
$("#changeColor").css({
'color':sel_fg_color,
'font-size':sel_font_size
});
});
});
</script>
Not: Bu uygulamadaki dikkat edilecek konu, "selectbox" option seçeneğiyle aslında 1 değer yerine, herhangi bir işaretle ayrılmış (Bu örnekte-(":")) 3 değer gönderiyor olmamızdır.
Açıklamalar:
- 9. Gelen değerimizi split metoduyla ":" işaretine göre parçalıyoruz, css_values artık bu değerleri içeren bir dizi oluyor,
- 12,15,18. "css_values" dizisinin verilerini, sırayla arkaplan rengi, font rengi ve font boyutu olarak diğer değişkenlere atıyoruz,
- 21,24. Burada da "area_product", ve changeColor ID'li nesnelerimizin stil özelliklerini değiştiriyoruz
Kolay gelsin, görüşmek üzere...
