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ı,
|
1 2 3 |
$(document).ready(function(){ // Kodlar buraya yazılacak }); |
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ı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<textarea id="select" cols="30" rows="8"> select olayı Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa a totam perferendis labore aut perspiciatis provident voluptate ut optio soluta accusamus, tempore tempora harum, eaque fuga vel dolores aspernatur. </textarea> <script> $(document).ready(function(){ $("#select").select(function() { alert("select olayı gerçekleşti.") }); }); </script> |
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ı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div id="scroll"> <p>scroll olayı</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam sed unde placeat sit quas illo, ducimus itaque reiciendis nisi ullam aperiam fugit debitis, enim accusamus, dolore similique consequuntur suscipit repellendus molestiae similique consequuntur suscipit repellendus molestiae! </p> </div> <script> $(document).ready(function(){ $("#scroll").scroll(function() { $(this).append(" scroll'u hareket ettiriyorsunuz! </br>"); }); }); </script> |
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ı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<button id="on">on( ) metod</button> <script> $(document).ready(function(){ $("#on").on({ mouseenter: function() { $(this).css("background-color", "#E7512F"); }, mouseleave: function() { $(this).css("background-color", "#007BFF"); }, click: function() { $(this).css("background-color", "#346712"); } }); }); </script> |
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ı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<button id="off">off( ) metod</button> <button id="off-disabled">İptal</button> <script> $(document).ready(function(){ $("#off").on("click", function() { alert("Butona Tıklandı.") }); $("#off-disabled").click(function() { $("#off").off("click"); }); }); </script> |
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ı
|
1 2 3 4 5 6 7 8 9 10 11 |
<button id="one">one( ) metod</button> <script> $(document).ready(function(){ $("#one").one("click", function() { alert("Butona Tıklandı.") }); }); </script> |
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.
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
