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");
    }
});

Örnekler

$(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() + " - " );
});
 
});