JQuery Events (JQuery Olayları)

JQuery Events (JQuery Olayları)

JQuery’de kullanabileceğimiz olaylar ve açıklamaları şunlardır: (Kullanım şekillerini örnekler kısmında inceleyebilirsiniz.)

click – Tıklama olayıdır.

dblclick - Çift tıklama olayıdır.

mouseenter - Fare ile üzerine gelinmesi olayıdır.

mouseleave - Farenin üzerinden çekilmesi olayıdır.

mousedown - Farenin tuşuna basılması olayıdır.

mouseup - Farenin basılı olan tuşunu bırakma olayıdır.

hover - mouseenter ve mouseleave olaylarının birleşimi gibi düşünülebilir. Hover olayına iki ayrı fonksiyon bağlanabilir. İlkinde fare üzerine geldiğinde yapılacak şeyler, ikincisinde ise fare terk ettiğinde yapılacak şeyler belirtilir.

focus - Odaklanma yani bir form elemanına tıklayarak aktif hale getirme olayıdır.

blur - Aktif haldeki form elemanının terk edilmesi olayıdır.

load – Bir nesnenin ve tüm içeriğinin yüklenmesi olayıdır. Resim dosyaları, scripts, frame, iframe, ve window nesneleri için kullanılabilir. O nesne istemci bilgisayara yüklendiğinde bir fonksiyonun çalışmasını sağlar.

unload – Bir web sayfasının terk edilmesi olayıdır. Unload olayı şu şekillerde tetiklenebilir:

Sayfadaki başka bir linke tıklanması
Başka bir adres yazılarak git komutu verilmesi/enter’a basılması
Tarayıcının ileri geri butonlarına tıklanması
Tarayıcı penceresinin kapatılması
Sayfanın yenilenmesi

Unload olayı ile ilgili bilinmesi gereken şey tüm tarayıcılarda çalışmayabileceğidir. Bu yüzden bu olayı kullanacaksak tüm tarayıcılarda test etmeliyiz.

resize – Tarayıcı penceresinin boyutlarının değiştirilmesi olayıdır. Window nesnesi için kullanılır ve pencere boyutlandırıldığında bir fonksiyonun çalışması sağlanır.

scroll – Kaydırma çubuklarının kaydırılması olayıdır. Window nesnesi için kullanılabileceği gibi, overflow özelliği scroll veya auto olarak ayarlanmış html nesneleri için de kullanılabilir.

On() Metodu

Bir nesne ile ilgili farklı olaylara ait fonksiyonlar oluşturulurken on() metodu kullanılabilir. Aşağıdaki örnekte .nesne class'ı uygulanmış elemanların mouseenter, mouseleave ve click olaylarına atama yapılmıştır.

$(".nesne").on({
    mouseenter: function(){
        $(this).css("background-color", "lightgray");
    },
    mouseleave: function(){
        $(this).css("background-color", "lightblue");
    },
    click: function(){
        $(this).css("background-color", "yellow");
    }
});

jquery olaylar events örnekleri, jquery events examples, tarayıcı penceresi boyutu değiştirildiğinde çalışacak, unload kullanımı, jquery unload event

KONU İLE İLGİLİ ÖRNEKLER

JQuery Olay Örnekleri (JQuery Events)

Kendin Dene

Kendin Dene butonuna tıklayarak örneğin kodlarını değiştirebilir ve sonucu görebilirsin.

JQuery Kısmı:

$(document).ready(function(){

$("#b1").click(function(){

$( ".metin1" ).append( "* " );

});

$("#b2").dblclick(function(){

$( ".metin2" ).append( "* " );

});

$("#b3").mouseenter(function(){

$( ".metin3" ).append( "* " );

});

$("#b4").mouseleave(function(){

$( ".metin4" ).append( "* " );

});

$("#b5").mousedown(function(){

$( ".metin5" ).append( "* " );

});

$("#b6").mouseup(function(){

$( ".metin6" ).append( "* " );

});

$("#b7").hover(function(){

$( ".metin7" ).append( "A " );

function(){

$( ".metin7" ).append( "B " );

});

$("#kutu1").focus(function(){

$("#kutu1").css("background-color", "#cccccc");

});

$("#kutu1").blur(function(){

$("#kutu1").css("background-color", "#ffffff");

});

$( window ).resize(function() {

$( ".metin8" ).append( $( window ).width() + " - " );

});

</script>

Html Kısmı:

<tr>

<td>Olayın Adı ve Anlamı</td>

<td>Tetikleyici</td>

<td>Etkilenecek Öğeler</td>

</tr>

<tr>

<td>click - Tıklama</td>

<td><button id="b1">Tıkla</button></td>

</tr>

<tr>

<td>dblclick - Çift Tıklama</td>

<td><button id="b2">Çift Tıkla</button></td>

</tr>

<tr>

<td>mouseenter - Fare ile Üzerine Gelme</td>

<td><button id="b3">İmleç Üzerimde</button></td>

</tr>

<tr>

<td>mouseleave - Fare Üzerinden Çekildiğinde</td>

<td><button id="b4">İmleç Üzerimden Çekildi</button></td>

</tr>

<tr>

<td>mousedown - Farenin Tuşuna Basıldığında</td>

<td><button id="b5">Fare Tuşuna Basıldı</button></td>

</tr>

<tr>

<td>mouseup - Farenin tuşu bırakıldığında</td>

<td><button id="b6">Fare Tuşu Bırakıldı</button></td>

</tr>

<tr>

<td>hover - mouseenter ve mouseleave olaylarının birleşimi gibi düşünülebilir. Hover olayına iki ayrı fonksiyon bağlanabilir. İlkinde fare üzerine geldiğinde yapılacak şeyler, ikincisinde ise fare terk ettiğinde yapılacak şeyler belirtilir. </td>

<td><button id="b7">hover Olayı</button></td>

</tr>

<tr>

<td>focus - Odaklanma yani bir form elemanına tıklayarak aktif hale getirme</td>

</tr>

<tr>

<td>blur - Aktif haldeki form elemanının terk edilmesi (denemek için önce içine sonra başka yere tıklayın)</td>

</tr>

<tr>

<td>resize - Denemek için pencere boyutunu değiştirin.</td>

</tr>

</table>

JQuery Events (JQuery Olayları)