Olay (Event)

Web sayfasının cevap verebileceği bütün farklı ziyaretçi eylemleri olay olarak tanımlanır. Bir olay, herhangi bir şey oluştuğu zaman, belirli bir hareketi temsil eder.

Örnekler:

• Fareyi bir eleman üzerinde hareket ettirmek
• Bir radyo butonu seçmek
• Bir elemana tıklamak

Aşağıdaki tabloda pek yaygın kullanılan DOM (Document Object Model) olaylarını görüyorsunuz:

Fare Olayları	Klavye Olayları	Form Olayları
click	keypress	submit
dbclick	keydown	change
mouseenter	keyup	focus
mouseleave		blur

 

Olay metotları için yazılış biçimi

jQuery'de, pek çok DOM olayı için, eşdeğer bir jQuery metodu mevcuttur. Örneğin, bir sayfadaki bütün paragraflara bir tıklama (click) olayı atamak için aşağıdaki ifade kullanılabilir:

$("p").click();

Bir sonraki adım ise olay meydana gelince (ateşlenince-fire) ne yapılması gerektiğini tanımlamaktır:

$("p").click(function(){
  // Olay meydana gelince gerçekleştirilecek EYLEM
});

 

Yaygın kullanılan jQuery olay metotları

• $(document).ready(): Bu metot, bir belge tam olarak yüklendiği zaman belirlenen bir fonksiyonun çalışmasını sağlar.

• click(): click() metodu, bir HTML elemanına bir olay kontrol fonksiyonunu bağlar. Fonksiyon, kullanıcı HTML elemanının üzerini tıklayınca icra edilir.

Aşağıdaki örnek kod, bir <p> elemanının üzerine tıklanınca o elemanın gizlenmesini gerçekleştiriyor:

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

 

• dblclick(): dblclick() metodu, bir HTML elemanına bir olay kontrol fonksiyonunu bağlar. Fonksiyon, kullanıcı HTML elemanının üzerini çift tıklayınca çalıştırılır.

Aşağıdaki örnek kod, bir <p> elemanının üzeri çift tıklanınca o elemanın gizlenmesini gerçekleştiriyor:

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

 

• mouseenter(): mouseenter() metodu, bir HTML elemanına bir olay kontrol fonksiyonunu bağlar. Fonksiyon, fare imleci HTML elemanının üzerine gelince icra edilir.

Aşağıdaki örnek kod, fare imleci bir <p> elemanının üzerine gelince o elemanın gizlenmesini gerçekleştiriyor:

$("#p1").mouseenter(function(){
  alert("p1 uzerindesiniz!");
});

 

• mouseleave(): mouseleave() metodu, bir HTML elemanına bir olay kontrol fonksiyonunu bağlar. Fonksiyon, mouse göstergesi HTML elemanının üzerini terk edince çalıştırılır.

$("#p1").mouseleave(function(){
  alert("p1 elemanından çıktınız!");
});

 

• mousedown(): mousedown() metodu, bir HTML elemanına bir olay kontrol fonksiyonunu bağlar. Fonksiyon, mouse göstergesi HTML elemanının üzerinde iken mouse sol tuşuna basılınca çalıştırılır.

Örnek kodu aşağıda inceleyebilirsiniz:

$("#p1").mousedown(function(){
  alert(" p1 üzerinde fare sol tuşuna basılıyor!");
});

 

• mouseup(): mouseup() metodu, bir HTML elemanına bir olay kontrol fonksiyonunu bağlar. Fonksiyon, fare imleçi HTML elemanının üzerinde iken fare sol tuşu serbest bırakılırsa çalıştırılır.

$("#p1").mouseup(function(){
  alert("p1 üzerinde fare serbest bırakılıyor!");
});

 

• hover(): hover() fonksiyonu, mouseenter() ve mouseleave() fonksiyonlarının bir kombinasyonunu oluşturur; fare HTML elemanı üzerine gelince ilk fonksiyon, elemanı terk edince de ikinci fonksiyon çalışır.

Örnek kodu aşağıda inceleyebilirsiniz:

$("#p1").hover(function(){
  alert("p1 elemanına girdiniz!");
  },
  function(){
  alert("p1 elemanını terk ettiniz!");
});

 

• focus(): focus() metodu, bir HTML form elemanına bir olay kontrol fonksiyonunu bağlar. Fonksiyon, HTML form alanı aktif hale gelince çalıştırılır.

Alttaki örneği dikkatle inceleyelim:

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

 

• blur(): blur() metodu, bir HTML elemanına bir olay kontrol fonksiyonunu bağlar. Fonksiyon, fare HTML form alanı aktif halden çıkınca çalıştırılır.

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