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.