JQuery Scroll, Select, On, Off, One Olayları

Bu yazımızda Jquery olayları içerisinden scroll, select, on, off, one olaylarını örnek uygulamalar üzerinden anlatacağım.

Olay dediğimiz kavram aslında hepimizin bildiği bir konu. Bir butonun tıklanması, fare ile bir nesnenin üzerine gelinmesi, bir formun doldurulup gönderilmesi, klavyeden bir tuşa basılması, açılır menüden seçim yapılması vb.. gibi aksiyonlar birer olaydır.

Örneklerimizde ilk önce olayın ne olduğundan bahsedip, ilgili örneğin kodlarını paylaşacağım. Yazının sonunda ise bu kodların uygulamasını paylaşacağım. 

Uygulama üzerinde her bir olayı ayrı ayrı incelerseniz daha iyi anlaşılacaktır.

 Önemli  Yazacağınız Jquery kodlarını, 

içerisinde yazmaya çalışın. Neden bu şekilde yazmamız gerektiği ile ilgili bir yazım bulunuyor. Bunun için JQuery Document Ready Nedir? yazımı okuyabilirsiniz.

JQUERY OLAYLARI

1 – JQUERY SELECT OLAYI

Select, text tipindeki input etiketinin yada textarea etiketinin içerisindeki yazıyı fare imleci ile seçtiğimiz anda gerçekleşen olaydır.

Örneğin, textarea içerisindeki yazının bir kısmını fare imleciyle seçtiğimizde alert ile istediğimiz bir mesajı verelim.

Html ve Jquery Kodları

2 – JQUERY SCROLL OLAYI

Scroll’un her hareketinde tetiklenen olaydır.

Örneğin, scroll’u her hareket ettirdiğimizde varolan yazının sonuna, “scroll’u hareket ettiriyorsunuz!” yazısını ekleyelim.

Html ve Jquery Kodları

Select ve Scroll Olaylarının Uygulama Örneği

3 – JQUERY ON OLAYI

Bir html nesnesi üzerinde birden fazla olayı gerçekleştirmek istediğimiz durumlarda kullanabiliriz.

Örneğin bir butona 3 farklı olay (mouseenter, mouseleave, click) tanımlayalım. En başta butona bir renk verelim.

Sonra butona tıklandığında farklı bir renk yapalım.

Butonun üzerine fare ile gelindiğinde farklı bir renk yapalım.

Butonun üzerinden fare imlecini çektiğimizde ise farklı bir renk yapalım.

Html ve Jquery Kodları

4 – JQUERY OFF OLAYI

Bir olayı istediğimiz zamanlarda pasif hale getirmek için kullanılır.

Örneğin id’si off olan butona her tıklandığında alert ile istediğimiz bir mesajı verelim.

Ne zaman id’si off-disabled olan butona tıklarsak, ilk butonun click olayını pasif hale getirmiş olacağız.

Yani, ilk butona tıklansa bile click olayı çalışmayacaktır.

Html ve Jquery Kodları

5 – JQUERY ONE OLAYI

Bir olayın sadece bir defa çalışması durumudur.

Örneğin butona ilk tıklamada alert ile istediğimiz bir mesajı verelim.

Bu mesajdan sonra butona tıklansa bile click olayı tetiklenmeyecektir. Çünkü one metodu ile sadece bir defa tetiklenmesini sağladık.

Html ve Jquery Kodları

On, Off ve One Olaylarının Uygulama Örneği

Jquery olayları hakkında daha fazla bilgi almak isterseniz JQuery sitesini ziyaret edebilirsiniz.

Şu yazılar da ilginizi çekebilir.

JQuery Fare Olayları

JQuery Klavye Olayları

JQuery Form Olayları

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Leave a Reply