X

jQuery Dersleri Ders 5 – jQuery’de Olay Metodları

jQuery'de Olay Metodları

jQuery derslerinin 5. dersine hoşgeldiniz. Bu dersimizde jQuery’de olan olay yöneticilerini anlatmaya çalışacağım. Öyleyse başlayalım.

Olay Methodları Nedir?

Olay methodları, web sitenize giren kullanıcıların yaptığı işlemlerdir. Olaylar anlık olarak gerçekleşir.

Bazı Olaylar;

  • Kullanıcının bir yazıya tıklaması,
  • Kullanıcının sağ taraftaki gezinme çubuğunu oynatması.

Bazı Olaylar

Mouse Olayları

Olay Açıklama
click Tıklandığında.
dblclick Çift tıklandığında.
mouseenter Mouse belirlediğiniz alana girince.
mouseleave Mouse belirlediğiniz alandan çıkınca.

 

Klavye Olayları

Olay Açıklama
keypress Tuşa basılı tutulurken çalışır.
keyup Tuştan parmağınızı kaldırılınca çalışır.
keydown Tuşa bastığınızda çalışmaya başlar.

 

Form Olayları

Olay Açıklama
submit Form gönderildiğinde çalışır.
change İnputlardaki bir değer değişince çalışır.
focus Bir inputa değer girişi sağlamak için tıklandığında çalışır.
blur Bir inputa focus yapıldıktan sonra başka bir yere tıklayınca çalışır.

 

Sayfa ve Pencere Olayları

Olay Açıklama
load Sayfa yüklendiğinde çalışır.
unload Sayfa yüklenirken çalışır.
resize Sayfa yeniden boyutlandırıldığında çalışır.
scroll Gezinme çubuğu oynatıldığında çalışır.

 

Söz dizimi aynen şu şekilde;

Önce html etiketi, class veya id seçimi yapıyoruz. [$(“#secimim”)] sonra da “.” koyup hangi olayı ekleyeceksek onu yazıyoruz.

$(“#secimim”).click(); Tabi soldaki gibi yazarsak çok fazla fonksiyonu olmayacaktır, daha etkili olması için aşağıdaki gibi click olayının içine function açmamız gerekiyor, etkili olması için aşağıdaki gibi kullanmamız gerekecek.


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

//Kodlarımız buraya yazılacak.

});

Buraya kadar pek bişey anlamamış olabilirsiniz, örneklerle pekiştireceğinize inanıyorum. O halde örneklere geçelim.

click() Örneği


$("#buton").click(function(){
$("form").hide();
});

Örneğimizi açıklayalım;

Birinci satırda id’si buton olan html etiketine tıklandığında şu işlemleri yap diye bir fonksiyon oluşturdum. İkinci satırda da fonksiyonun içine form html etiketinin gizlenmesini istedim. Üçüncü satırımda ise fonksiyonumun taglarını kapattım.

dblclick() Örneği


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

Örneğimizi açıklayalım;

Birinci satırda id’si yazi olan html etiketine çift tıklandığında şunları yap diyerek fonksiyon oluşturdum. İkinci satırda ise id’si yazi olan html etiketinin gizlenmesini fonksiyon içinde istedim. Üçüncü satırda ise fonkiyon taglarını kapattım.

mouseenter() Örneği


$("#kutu").mouseenter(function(){
alert("Mouse, id'si kutu olan html etiketinin üstüne geldi.");
});

Örneğimizi açıklayalım;

Birinci satırda id’si kutu olan html etiketinin üstüne mouse geldiğinde şunları yap diye bir fonksiyon oluşturdum. İkinci satırda ise alert methoduyla ekrana şunu yazdırmasını isteyerek “Mouse, id’si kutu olan html etiketinin üstüne geldi.” fonksiyonun içini doldurdum. Üçüncü satırda ise fonksiyonumu kapattım.

mouseleave() Örneği


$("#kutu").mouseleave(function(){
alert("Mouse, id'si kutu olan html etiketinin üstüne geldi ve ayrıldı.");
});

Örneğimizi açıklayalım;

Birinci satırda id’si kutu olan html etiketinin üstüne mouse gelip ayrıldığında şunları yap diye bir fonksiyon oluşturdum. İkinci satırda ise alert methoduyla ekrana şunu yazdırmasını isteyerek “Mouse, id’si kutu olan html etiketinin üstüne geldi ve ayrıldı.” fonksiyonun içini doldurdum. Üçüncü satırda ise fonksiyonumu kapattım.

mousedown() Örneği


$("#kutu").mousedown(function(){
alert("İd'si kutu olan html etiketine tıklanıldı!");
});

Birinci satırda id’si kutu olan html etiketini seçip mouse ile tıklandığında şu işlemleri yapması için fonksiyon oluşturdum. İkinci satırda da alert methodunu kullanarak “İd’si kutu olan html etiketine tıklanıldı!” yazısını yazdırmasını fonksiyon içinde istedim. Üçüncü satırda ise fonksiyon taglarımı kapattım.

mouseup() Örneği


$("#kutu").mouseup(function(){
alert("İd'si kutu olan html etiketine önce tıklanıldı sonra tuştan parmak çekildi!");
});

Birinci satırda id’si kutu olan html etiketini seçip mouse ile tıklanılıp tuştan parmak kaldırılınca şu işlemleri yapması için fonksiyon oluşturdum. İkinci satırda da alert methodunu kullanarak “İd’si kutu olan html etiketine önce tıklanıldı sonra tuştan parmak çekildi!” yazısını yazdırmasını fonksiyon içinde istedim. Üçüncü satırda ise fonksiyon taglarımı kapattım.

hover() Örneği

Aynı mouseenter methoduyla aynı işleme sahiptir. Örnek yazmaya gerek yok diye düşünüyorum.

focus() Örneği


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

Birinci satırda sayfadaki tüm inputları seçtim ve inputa veri girmek için tıklandığında ne yapılacağını söylemek için fonksiyon oluşturdum. İkinci satırda oluşturduğum fonksiyonun içine css methodunu kullanarak inputun arkaplan rengini siyah yapmasını istedim. Üçüncü satırda ise fonksiyonun taglarını kapattım.

blur() Örneği


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

Birinci satırda sayfadaki tüm inputları seçtim ve inputa tıklandıktan sonra başka bir yere tıklandıysa ne yapılacağını söylemek için fonksiyon oluşturdum. İkinci satırda oluşturduğum fonksiyonun içine css methodunu kullanarak inputun arkaplan rengini kırmızı yapmasını istedim. Üçüncü satırda ise fonksiyonun taglarını kapattım.

Örnekler bu kadar umarım anlamışsınızdır. Ayrıca jQuery’deki olaylar yukarıda belirttiğim olaylardan ibaret değil şimdilik bunları bilmeniz yeterli. Daha sonraki yazılarımda olayları tek tek ayrıntıya girerek anlatacağım şimdilik bu kadar yeter. Yazımı okuduğunuz için teşekkür ediyorum kendinize iyi bakın.

Tuğra Yaldız: Merhaba bu alanda kısaca kendimden bahsedeceğim. Adım Tuğra, 19 yaşındayım. Ticaret lisesi mezunuyum şuan Afyon Kocatepe Üniversitesinde İşletme bölümü okuyorum. Aslen Konyalıyım Afyonkarahisar'da ailemle birlikte yaşıyorum. Yaklaşık 11 senedir bilgisayarlarla içli dışlıyım son 6 senedir kendimi internete 2 yıldır ise Web Programlamaya verdim ileri derece PHP ve HTML biliyorum CSS Javascript Jquery için kendimi geliştirmeye devam ediyorum.. Yakında yayına çıkaracağım yyazilim.com için projeler geliştiriyorum. İş çözümleriniz için mail (iletisim@tugrayaldiz.com) atabilirsiniz. Şimdilik benden bu kadar eğer sende aramıza gelmek istersen mail listemize katılman yeterli kendine iyi bak. :) Not: Web programlama dersleri için https://www.w3schools.com adresini kaynak alıyorum.
Benzer Yazılar