Jquery on() Kullanımı – Jquery Fonksiyonlar
Merhaba, bu yazımda jquery de benim en çok kullandığım, belki de en çok kullanılan fonksiyonlardan biri olan on() kullanımı hakkında bilgi vererek örnekler yapacağım. Bir önceki jquery yazım olan Jquery Seçiciler – Jquery HTML Eleman Seçicileri başlıklı yazımda jquery de seçicilerden bahsetmiş örnekler vererek anlatmaya çalışmıştım. Eğer jquery ile yeni ilgilenen birisi iseniz öncelikle o yazımı okumanızı, daha sonra fonksiyonlara geçmenizi tavsiye ederim.
Jquery on() metodu, içerisine bir çok farklı event yani olay girebildiğimiz çok kullanışlı bir fonksiyondur. İçerisine girebildiğimiz olaylardan kastım, click, doubleclick, mousedown, mouseenter ve mouseleave gibi olaylardır.
Şimdi bu olaylardan bazılarının kullanımlarını örneklerle göstereyim. Diğer olay kullanımları da aynı.
Örnek;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<html> <head> <title>scetinkaya.com - Jquery on() Kullanımı</title> </head> <body> <p class="tikla">jquery ile click olayı - TIKLAYIN</p> <p class="cifttikla">jquery ile dblclick olayı - ÇİFT TIKLAYIN</p> <p class="basilitut">jquery ile mousedown olayı - TIKLA VE BASILI TUT</p> <p class="tikbirak">jquery ile mouseup olayı - BASILI TUTTUĞUN TIKI BIRAK</p> <p class="uzerinegel">jquery ile mouseenter olayı - FARE İLE ÜZERİNE GEL</p> <p class="uzerindengit">jquery ile mouseleave olayı - FARE İLE ÜZERİNDEN GİT</p> </body> <script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $(document).ready(function(){ // jquery ile click olayı $(".tikla").on("click", function(){ alert("jquery ile click olayı"); }); // jquery ile dblclick olayı $(".cifttikla").on("dblclick", function(){ alert("jquery ile dblclick olayı"); }); // jquery ile mousedown olayı $(".basilitut").on("mousedown", function(){ alert("jquery ile mousedown olayı"); }); // jquery ile mouseup olayı $(".tikbirak").on("mouseup", function(){ alert("jquery ile mouseup olayı"); }); // jquery ile mouseenter olayı $(".uzerinegel").on("mouseenter", function(){ alert("jquery ile mouseenter olayı"); }); // jquery ile mouseleave olayı $(".uzerindengit").on("mouseleave", function(){ alert("jquery ile mouseleave olayı"); }); }); </script> </html> |
Yukarıdaki kodları kopyalayın ve bir metin belgesine yapıştırarak index.html adı ile yeniden isimlendirin. Daha sonra tarayıcınızda açarak kullanımları kendiniz de test edin.
Örnekte de gösterdiğim gibi, tıklama, çift tıklama, tıklayıp basılı tutma, basılı tıkı bırakma, mouse ile üzerine gelme, mouse ile üzerinden gitme gibi işlemleri yaptık. Bu işlemler arttırılabilir.
Jquery on() kullanımı bu şekilde. Bir sonraki yazıda görüşmek üzere.