5. Jquery Event’ler

CLICK EVENTI

JQuery’de etiketlere click event’i yani tıklandığında tetiklenecek işlemi yapması için fonksiyonellik katabiliriz. Bunun için selector kurallarını kullanarak etiket seçilir. Daha sonra .click( function () { …..  } ) ;   fonksiyonu ile etikete click işlemi katılır. Fonksiyonun içerisine de click edildiğinde yapılacak işlem yazılır.

<script>

$(document).ready(function () {

$("#cagatay").click(function () { alert("HATA") });

 });
 </script>

 <div id="cagatay">TIKLA</div>

<script>

$(document).ready(function () {

$("#cagatay").click(function () { $(this).hide(); });

});
  </script>

 <div id="cagatay">TIKLA</div>

DBLCLICK EVENTI

Click işlemini tek tıkta değil de çift tıkta tetiklenecek şekilde gerçekleştirmek istersek click yerine dblclick eventini kullanırız. Aşağıda hide olayı tek tıkla değil çift tıkla tetiklenecektir.

$("#cagatay").dblclick(function () {
 $(this).hide();
 });

MOUSEENTER EVENTI

Event farenin imleci etiketin sınırları içerisine girdiği zaman tetiklenir. Herhangi bir tıklama olayına ihtiyaç yoktur.

$("#cagatay").mouseenter(function () {
 alert("sınırlara girdiniz");
 } );

MOUSELEAVE EVENTI

mouseenter eventinin tersidir. Mouse imleci tag sınırları dışarısına çıktığında event aktif olur.

$("#cagatay").mouseleave(function(){
 alert("Bye! You now leave p1!");
 });

MOUSEDOWN-MOUSEUP EVENTI

mousedown event’i seçili tag sınırları içerisindeyken farenin herhangi bir tuşuna basıldığında tetiklenen olaydır. Bu tuş sol sağ veya orta tuş olabilir.

$("#cagatay").mousedown(function () { 
alert("mouse down over p1"); 

});

mouseup event’i ise seçili tag sınırları içerisinde farenin herhangi bir tuşuna basılıyken o tuş serbest bırakıldığında tetiklenen olaydır. Bu tuş sol sağ veya orta tuş olabilir.

$("#cagatay").mouseup(function () {
 alert("mouse up over p1");
 
 });

HOVER EVENTI

hover eventi mouseenter ve mouseleave eventlerinin birleşimidir. Event iki adet fonksiyon parametresi alır. İlk fonksiyon parametresi, imleç tag sınırlarına girdiğinde gerçekleştirilecek olay yani mouseenter, ikincisi ise imleç mouse sınırlarının dışına çıktığında gerçekleştirilcek olay yani mouseleave eventidir.

 $("#cagatay").hover(function () {
 alert("You entered p1!");
 },
 function () {
 alert("Bye! You now leave p1!");
 });

FOCUS-BLUR EVENTI

Focus eventi, genellikle inputlara tıklandığında ve input aktif edildiğinde tetiklenecek event’i temsil eder. Aşağıda text inputuna değer girilmek istendiği zaman tıklandığında input alanının sarı olması söylenmiştir.

$("#cagatay").focus(function () {
 $(this).css("background-color", "yellow");
 });

Blur eventi ise focuslanmış inputun focus işlemi bittiğinde yani release edildiğinde tetiklenecek olayı temsil eder.

$("#cagatay").blur(function(){
    $(this).css("background-color", "#ffffff");
});

ON EVENTI

Bir tag’e birden fazla event yüklemeye yarar.

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