JQuery'de Olaylar (Events) Kullanımı

jQuery Olarylar (Events), kullanıcı etkileşimlerini ve tarayıcıdaki diğer olayları yönetmek için kullanılan bir konudur. Örneğin, bir kullanıcı bir düğmeye tıkladığında veya bir fare işareti bir öğenin üzerine geldiğinde tetiklenen işlevleri yönetmek için jQuery Events kullanılır. Bu, web sayfalarının etkileşimli ve dinamik olmasını sağlar.

JQuery'de Başlıca Events'lar;

• click: En temel ve en sık kullanılan olay türüdür, bir nesnenin yada bir alanın fare ile tıklanmasını takip eder.

  
  

  $("#button1").click(function(){
   alert("Butona Tıklandı!");
  });

  
  

  Yukarıdaki örnekte id değeri button1 olan nesneye tıklandığında "Butona Tıklandı!" uyarısı çıkaracaktır.

  
  

• hover: Mouse imlecinin bir nesnenin üzerine gelmesi olayını temsil eder.

  
  

  $("#benim-nesnem").hover(function(){
   $(this).addClass("highlight");;
  }, function(){
   $(this).removeClass("highlight");
  });});

  
  

  Yukarıdaki örnekte, fare bir öğenin üzerine geldiğinde highlight sınıfını ekler ve öğeden çıktığında sınıfı kaldırır.

  
  

• submit: Form nesnesinin gönderilmesi olayını temsil eder.

  
  

  $("form").submit(function(event){
   alert("Form Gönderildi!");
  });

  
  

  Yukarıdaki örnekte, form nesnemizin gönderilmesi olayında uyarı penceresi görüntülenecektir.

  
  

• keydown / keyup: klavyede herhangi bir tuşun basılması(keydown) yada basılma olayının bitirilmesini(keyup) temsil eder.

  
  

  $("#form-input").keydown(function(event){
   alert("Tuşa basıldı!");
  });

  
  

  Yukarıdaki örnekte, form-input id'li nesnemize tuşa basılarak bir değer girilmesi sonucunda ekrana uyarı verecektir.

  
  

  $("#form-input").keyup(function(event){
   alert("Tuş bırakıldı!");
  });

  
  

  Yukarıdaki örnekte, form-input id'li nesnemize basılan tuşun bırakılması sonucunda ekrana uyarı verecektir.

  
  

• change: Herhangi bir form nesnesinin değeri değiştirildiğini temsil eder.

  
  

  $("#select-box").submit(function(event){
   alert("Seçenek Değiştirildi");
  });

  
  

  Yukarıdaki örnekte, select-box id'li form nesnemizin değerinin değiştirilmesi olayında uyarı penceresi görüntülenecektir.

  
  

• focus: Herhangi bir öğeye odaklanıldığı olayını temsil eder.

  
  

  $("#inputum").focus(function(event){
   alert("Nesneye odaklanıldı");
  });

  
  

  Yukarıdaki örnekte, inputum id'li form nesnemize odaklanıldğında yani focus olduğunda uyarı penceresi görüntülenecektir..

  
  

JQuery'de Olaylar (events)