eburhan.com

Bir önceki jQuery ve Css işlemleri konusundan sonra şimdi çok daha önemli olan olaylar (events) konusuyla devam edelim. Olaylar, bir kullanıcının bir web sayfasında yapmış olduğu etkileşimlerdir. Örneğin kullanıcı bir linke tıkladığında click olayı, klavyeden bir tuşa bastığında ise keydown olayı gerçekleşmiş olur. Bu olayların ne olduğunu ve bu olaylar oluştuğunda nasıl işlemler yapılabileceğini bu yazıda anlatmaya çalışacağım.

Olaylar konusunu 5 başlık altında anlatmaya çalışacağım. Bu yüzden önce başlıklarına bir gözatalım:

1. Sayfa yüklendiği anda kod çalıştırmak
2. Anonim fonksiyonlardan faydalanmak
3. Olay Yardımcıları
4. Olay İşleme
5. Etkileşim yardımcıları

Yazı başlıklarını da öğrendikten sonra artık başlayabiliriz

1. Sayfa yüklendiği anda kod çalıştırmak

Öncelikle bundan sonra sık sık kullanacağımız ready olayını tanıyalım. Bu olay ile bir elemanın kullanıma hazır olduğu anda işlemler yapabiliyoruz. Örneğin web sayfamızın yüklenip de kullanıma hazır olduğu anda bir fonksiyon çalıştırmasını sağlayalım:

$(document).ready( calisacakFonksion );

$(document) ifadesi ile üzerinde çalışacağımız belgeyi (dökümanı) seçtik. Daha sonra bu belgenin ready olayında calisacakFonksiyon isimli fonksiyonun işlem görmesini belirttik. Şimdi küçük bir örnekle bu durumu pekiştirelim:

$(document).ready( mesajGoster );

function mesajGoster()
{
    alert('merhaba dünya');
}

Bu kodlara sahip bir web sayfası yüklendiğinde "merhaba dünya" yazan mesaj kutusu gösterilecektir. Test etmek için Örnek 1 sayfasına bakabilirsiniz.

2. Anonim fonksiyonlardan faydalanmak

Dikkat ettiyseniz üstteki örnekte mesajGoster() fonksiyonu herhangi bir parametre almıyor. Fakat pekçok zaman bir fonksiyona parametreler göndermemiz gerekebiliyor. Örneğin mesajGoster() fonksiyonuna bir isim parametresi ekleyelim.

function mesajGoster( isim )
{
    alert('merhaba ' + isim);
}

Böyle bir durumda fonksiyonumuza parametre göndererek çalışmasını sağlamak için $(document).ready(mesajGoster) yerine şöyle bir kod kullanıyoruz:

$(document).ready( function() {

    mesajGoster( 'türkiye' );

});

Bu kodların olduğu bir web sayfası yüklendiği zaman "merhaba türkiye" yazan mesajı gösterecektir. Test etmek için Örnek 2 sayfasına bakabilirsiniz.

3. Olay Yardımcıları

Yazının giriş kısmında da belirttiğim gibi kullanıcının bir linke tıklamasından, klavyedeki bir tuşa basmasına kadar pekçok türde olay bulunuyor. jQuery ise bu olay türlerinin hepsini Olay Yardımcıları (Event Helpers) başlığı altında toplamış. İşte biz de bu yardımcıları kullanarak istediğimiz işlemlerin istediğimiz bir olay gerçekleştiği anda icra edilmesini sağlayabiliyoruz. jQuery Events sayfasından olay yardımcılarının tamamına ulaşabilirsiniz. Ben burada en fazla kullanıldığını düşündüğüm olay yardımcılarından bahsedeceğim.

• click(): bir elemana tıklanıldığında
• dblclick(): bir elemana çift tıklanıldığında
• mouseover(): fare imleci bir elemanın üzerine geldiğinde
• mouseout(): fare imleci bir elemanın üzerinden başka bir yere götürüldüğünde
• focus(): bir form elemanına odaklanıldığında
• blur(): odaklanılmış bir form elemanından başka bir yere odaklanıldığında
• change(): bir form elemanı değiştirildinde
• submit(): bir form gönderildiğinde
• keydown(): klavyeden bir tuşa basıldığında
• keyup(): klavyeden bir tuşa basılıp bırakıldığı anda

Olay yardımcılarının kullanımı da aynen birinci bölümde bahsettiğim ready olayınınki gibidir. Fakat biz yine de bir örnek yapalım. Örneğimizde ID özniteliği "link" olan bir bağlantıya tıklandığında web sayfamızın arkaplan rengi yeşil olsun:

$(document).ready( function() {

    $('a#link').click( function(){

    	$('body').css('background-color', '#349934');

    })
});

Bu örnekte ilkönce web sayfamız kullanıma hazır mı değil mi $('document').ready() ile kontrol ettik. Daha sonra da $('a#link') ile bağlantımızı seçtik ve click() olayı gerçekleştiğinde web sayfamızın arkaplan rengini yeşil yapmış olduk. css() ifadesinin ise bir elemanın css özelliğini değiştirdiğini bir önceki yazı‘dan hatırlıyor olmalısınız. Bu örneği Örnek 3 sayfasında test edebilirsiniz.

4. Olay İşleme

jQuery ile olayları daha kapsamlı bir biçimde işleyebilmek için Olay İşleme (Event Handling) fonksiyonlarını kullanıyoruz. Bu fonksiyonlar ile bir elemana yukarıda bahsettiğimiz olay yardımcılarından herhangi birisini atayabilir, önceden atadığımız bir olayı kaldırabilir veya bir eleman içerisinden başka bir elemana atanmış olan olayı tetikleyebiliriz. Benim anlatacağım olay işleme fonksiyonları bind(), unbind(), one() ve trigger() olacak.

İlkönce bind() fonksiyonuna bakalım. Bu olay işleme fonksiyonun amacı herhangi bir elemana olay yardımcılarından birisini atamaktır. Diğer önemli bir görevi ise yukarıda bahsettiğimiz olay yardımcılarının dışında kendimize özel olaylar da oluşturabilmektir. Alttaki örnek ile ID özniteliği "link" olan bir bağlantıya tıklandığı zaman web sayfamızın arkaplan rengi yeşil oluyor.

$(document).ready( function() {

    $('a#link').bind('click', function(){
        $('body').css('background-color', '#349934');
    });

});

Aslında bu örnekte yapmış olduğumuz iş bir önceki Örnek 3 ile aynı sonucu verecektir. Fakat bind() ile atadığımız herhangi bir olayı, istediğimiz zaman unbind() fonksiyonu ile kaldırabilme avantajına sahibiz. Şimdi unbind() fonksiyonunu inceleyelim.

$(document).ready( function() {

    $('a#link').unbind('click');

});

Bu şekilde daha önceden ID özniteliği "link" olan bağlantıya atadığımız "click" olayını kaldırmış oluyoruz. Böylece bu bağlantıya tıklandığında artık hiçbirşey olmayacaktır. Eğer click, mouseover, dblclick… gibi sahip olduğu bütün olayları tek seferde kaldırmak isteseydik o zaman $('a#link').unbind(); ifadesini kullanmamız yeterli olacaktı. Bu son iki örneği bir arada test etmek isterseniz Örnek 4A isimli sayfaya bakabilirsiniz.

Şimdi de one() isimli olay işleme fonksiyonuna bakalım. Bazen bir olayın yalnızca 1 kez olmasını isteriz. Örneğin kullanıcı bir bağlantıya tıkladığında birkez mesaj kutusu görünsün, diğer tıklamalarında ise bu mesaj kutusu görünmesin gibi…

$(document).ready( function() {

    $('a#link').one('click', function(){
        alert('bu mesaj kutusu yalnızca 1 kez görüntülenecek')
    })

})

İşte üstteki örnekte kullanıcı, ID özniteliği "link" olan bağlantıya ilk tıklamasında mesaj kutusunu görecek, diğer tıklamada ise görmeyecektir. Bu örneği test etmek için Örnek 4B isimli sayfaya bakabilirsiniz.

Son olarak ise trigger()fonksiyonundan bahsedelim. Kendisi bir tetikçidir Örneğin bir bağlantının "click" olayında bir mesaj kutusu gösteriliyor olsun. Normalde bu mesaj kutusu biz yalnızca bağlantıya tıkladığımızda görüntülenecektir. Fakat trigger() ile bir buton üzerine geldiğimizde, bağlantıya atanmış olan Click olayının tetiklenmesini ve mesaj kutusunun gösterilmesini sağlayabiliyoruz. Şimdi alttaki örneğe bakalım:

$(document).ready( function() {

    $('a#link').bind('click', function(){
        alert('merhaba dünya')
    })

    $('button').bind('mouseover', function(){
		$('a#link').trigger('click')
    })

})

Gördüğünüz gibi sondaki trigger('click') ifadesi ile bir buton içerisinden dışarıdaki bir bağlantının "click" olayını tetikleyebiliyoruz. Örneği test etmek için Örnek 4C isimli sayfaya bakabilirsiniz.

5. Etkileşim yardımcıları

Yazının ilk paragrafında olayların, bir kullanıcının bir web sayfasında yapmış olduğu etkileşimler olduğunu söylemiştik. İşte bu etkileşimleri arttırmak için jQuery bizlere Etkileşim Yardımcıları (Interaction Helpers) isimli fonksiyonları sunmuştur. Bu fonksiyonlar hover() ve toggle() olmak üzere iki tanedir.

hover() fonksiyonu, fareyi bir elemanın üzerine getirdiğimizde bir işlem, üzerinden çektiğimizde ise başka bir işlem yapabilmemizi sağlıyor. Üçüncü bölümde bahsettiğimiz olay yardımcılarından mouseover() ve mouseout() ile de bunu yapabiliriz ama jQuery bize hover() ile önemli bir kolaylık sağlıyor. Şimdi örneğe geçelim. Örnekte fareyi bir bağlantının üzerine getirdiğimizde web sayfamızın arkaplan rengi yeşil renk, üzerinden çektiğimizde ise mavi renk olsun.

$(document).ready( function() {
    $('a#link').hover( yesilYap, maviYap );
})

function yesilYap(){
    $('body').css('background-color', '#339933')
}

function maviYap(){
    $('body').css('background-color', '#509dee')
}

Örnekte ilk önce yesilYap() ve maviYap() isimli fonksiyonların hazır olduğunu kabul ediyoruz. Daha sonra ise hover() ile sırasıyla bağlantının üstündeyken ve üstünde değilken bu fonksiyonların çalıştırılmasını belirtiyoruz. Örneği test etmek için Örnek 5A sayfasına bakabilirsiniz.

Şimdi ise diğer etkileşim yardımcısı olan toggle() fonksiyonuna bakalım. Bir önceki hover() fonksiyonuyla bir elemanın üzerindeyken ve üzerinde değilken olmak üzere 2 farklı işlem yapabiliyorduk. toggle() fonksiyonu ise bir elemana her tıkladığımızda farklı 2 işlemden birisinin yapılabilmesini sağlıyor. Yani bir bağlantıya ilk tıkladığımızda web sayfamızın arkaplanı yeşil oluyorken, diğer tıklayışımızda ise mavi oluyor. Şimdi bu son dediğimizi bir örneğe dönüştürelim:

$(document).ready( function() {
    $('a#link').toggle( yesilYap, maviYap )
})

function yesilYap(){
    $('body').css('background-color', '#339933')
}

function maviYap(){
    $('body').css('background-color', '#509dee')
}

Gördüğünüz gibi toggle() fonksiyonu da hover() fonksiyonu gibi çalışıyor. Bu örneği test etmek için Örnek 5B sayfasına bakabilirsiniz.

Sonuç…

Bu yazıda, jQuery ile olayları yönetebilmek için gerekli olan fonksiyonlardan bazılarını anlatmaya çalıştım. Olaylar konusunda anlatmak isteyip de anlatamadığım daha birçok konu kaldı maalesef. Bunların hepsini tek bir yazıya sıkıştırmak istemedim. İlerleyen zamanlarda bunlardan yeri geldikçe bahsedeceğim. Siz yine de jQuery web sitesinin Events sayfasına bakmayı unutmayın

benzer yazılar:

• jQuery ile "çek-bırak" özellikli nesneler oluşturmak
• jQuery ile hazırladığım "Kalan Karakter" eklentisi
• jQuery ve JSON işlemleri