Jquery on kullanımı

Sezai AlkanFrontend Developer

Jquery #jquery #on

Jquery de on() fonksiyonunu çok amaçlı olarak kullanım sağlayabiliyoruz. mouse olayları, tıklama, çift tıklama, üzerine gelince, üzerinde gidince gibi durumlarda olay tetiklememize yardımcı olmaktadır. Farklı amaçlardada kullanımı mevcuttur. Mesela bir sayfaya sonradan nesne eklediğimizde jquery ile bu nesneyi yönetimiyor olacağız fakat on() fonksiyonu ile sonradan sayfaya dahil olan nesnelerinde yönetimini gerçekleştirebiliriz.

1. click - Nesneye tıklanınca olay tetiklenir
2. dblclick - Nesneye çift tıklanınca olay tetiklenir
3. mousedown - Nesneye basılı tutunca olay tetiklenir
4. mouseup - Nesneye tıklanıp bırakıldıktan sonra tetiklenir
5. mouseenter - Nesnenin üzerine gelince tetiklenir
6. mouseleave - Nesnenin üzerinden gidince tetiklenir

<button class="tikla" >Tıkla</button> 
<button class="cifttikla">Çift Tıkla</button>
<button class="basilitut">Basılı Tut</button>
<button class="tutbirak">Basılı Tut Bırak</button>
<button class="uzerinegel">Üzerine Gel</button>
<button class="uzerindengit">Üzerinden git</button>

<script>
    $(document).ready(function(){

        $(".tikla").on("click", function(){
            alert("Tıkla");
        });

        $(".cifttikla").on("dblclick", function(){
            alert("Çift Tıkla");
        });

        $(".basilitut").on("mousedown", function(){
            alert("Basılı Tut");
        });

        $(".tutbirak").on("mouseup", function(){
            alert("Basılı Tut Bırak");
        });

        $(".uzerinegel").on("mouseenter", function(){
            alert("Üzerine Gel");
        });

        $(".uzerindengit").on("mouseleave", function(){
            alert("Üzerinden git");
        });

    });
</script> 

Yukarıdaki örnekte on() fonksiyonu ile Mouse olaylarına örnek hazırlamış oluyoruz. Birde Sayfaya sonradan eklenen nesneler ile ilgili örnek aşağıdan inceleyebilirsiniz.

<button>Yeni Buton Oluştur</button>

<script type="text/javascript">
    $(document).ready(function(){
        $('button').click(function(){
            $(this).after("<button>Yeni Buton Oluştur</button>");
        });
    });
</script>

Yukarıdaki örnekte button a tıklandıktan sonra yeni bir buton eklenmektedir. Fakat eklenen yeni bir butona tıklandığında, buton oluşturmayacaktır. Burada sayfaya sonradan dahil olan nesneler üzerinde de olay yakalama işlemi sağlamamız için on() fonksiyonunu kullanmamız gerekmektedir.

<button>Yeni Buton Oluştur</button>

<script type="text/javascript">
    $(document).ready(function(){
        $('body').on('click','button',function(){
            $(this).after("<button>Yeni Buton Oluştur</button>");
        });
    });
</script>

Yukarıdaki örnekte ise sonradan oluşturduğumuz butonlara da tıkladığımızda yeni bir buton oluşturacaktır. İsterseniz bunu Çift tıklama gibi olay tetikleyicileriylede yapabilirsiniz.