javascript .on() ile .click() arasındaki fark?

Selam,
on ile click arasındaki fark tam olarak nedir?

$("body").on("click", ".deneme", function() {}

$(".deneme").click(function() {}

Normalde .click yöntemi ile toggleClass eklediğimde çalışıyor fakat sayfanın bir yerinde yukardaki .on() yöntemini kullanınca sayfanın geri kalanında .click yöntemi ile çalıştırdığım toggleClass sadece bir kere çalışıp duruyor. Bu yüzden sayfanın tamamında kullandığım toggleClass'ları .on() yöntemini kullanarak eklediğimde çalışmaya devam ediyorlar. Bunun sebebi nedir?

click de çalışıyor her zmaan document reay function içine yazman lazım

onclick daha yeni bir yöntem, diğeri eski pageonload olduğunda çalışır. ilk yöntem sonradan class belirlersen çalışabilir ikinci ise çalışmaz.

her zaman document ready içinde yazıyorum. Ama click ile konuda belirttiğim gibi bir kere çalışıyor atıyorum .deneme classını ekliyor ama tekrar tıkladığımda kaldırmıyorken, on yöntemi ile ekliyor ve kaldırıyor hocam bu olayı anlamadım normalde click ile de çalışıyordu ve sayfanın bir yerinde on yöntemini kullanmak zorunda kaldıktan sonra bu olay oldu.

bilmiyorum bende öyle bişey olmuyor her zaman çalışıyor engelleyen birşey vardır eger tıklattıgn nesneden birden fazla varsa yada javascipt ile tıklanacak nesneyi create ediyorsan ondan olabilir

on genellikle domda olmayan öğelere yani doma sonradan eklenmiş öğelere event eklemek için kullanılır

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

 $(".tikla").click(function ()
 {
     $('.sonuc').html('tıkladın ve yeni buton ekledim alta');
     
     $('.sonradan_eklenecek_butonlar').html('<button class="yeni_tikla" type="button">buna tıkla</button>');
     
 });
 
 $(".yeni_tikla").click(function ()
 {
     $('.sonuc').html('yeni butona tıkladın. Ama beni göremezsin element sonradan eklendi. Ben sadece var olan kaynaktaki elementlere işlem yaparım sonradan eklenen elementler için değil.');
     
     
 });
 
 $(document).on("click", ".yeni_tikla", function ()
 {
     $('.sonuc').html('tıkladın ve yeni butonu ekledim alta, ben her zaman çalışırım.');
 });
    
});
</script>

<div class="sonuc"></div>

<button class="tikla" type="button">tıkla</button>

<div class="sonradan_eklenecek_butonlar"></div>

Üşenmeden detaylı yazdığın için teşekkürler hocam + r10+
Deneme yanılma ile bunu çok iyi öğrendim.

$(document).on("click")
yerine
$("body").on("click") da kullandığımda oluyor. Her ikisi de çalışıyor. Bunu kullanmak $(".class") kullanmaktan performans olarak olumsuz etkisi olur mu sadece merak ediyorum.

Tüm gövdeyi onclicke bağlamak anlamsızdır, bu ancak gövdenin herhangi bir yerinde tıklanan elementi tespit etmek amacıyla kullanmak mantıklı olabilir.

Aşağıdaki işlevler her zaman daha mantıklı olandır.

$(document).on("submit", ".yeni_form", function ()
{
   // <form class="yeni_form"> submit edildiğinde çalışır. Örnek: var form_inputs = $(this).serialize(); diyerek formdaki tüm veriler alınabilir.
});
$(document).on("click", ".bir_link", function ()
{
   // < a href="#" class="bir_link">örnek</a>
});
$(document).on("keyup", ".bir_yazi", function ()
{
   // <input type="text" class="bir_yazi"> Herhangi birşey yazıldığında tetiklenir.
});
$(document).on("mouseover", ".bir_kutu", function ()
{
   // <div class="bir_kutu" style="width:200px;height:200px">kutu</div> İlgili divin çevresinde mouse ile geldiğinde tetiklenir.
});
$(document).on("mouseout", ".bir_kutu", function ()
{
   // <div class="bir_kutu" style="width:200px;height:200px">kutu</div> İlgili div çevresinde mouse ile çıkdığında tetiklenir.
});