jQuery Academy · Ders

Sağlam Olay Yetkilendirmesi Uygulama

1. ders / 311 adım

Sağlam Olay Yetkilendirmesi Uygulama, CoddyKit'te ücretsiz bir jQuery Academy dersidir. Bu, 3 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, jQuery Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. jQuery Academy kursu toplamda 3 dersten oluşur.

Olay Yetkilendirme Nedir?

Olay yetkilendirmesine hoş geldiniz! Bu güçlü teknik, web uygulamalarınızdaki olayları verimli bir şekilde yönetmenize yardımcı olur.

Her bir öğeye çok sayıda olay dinleyicisi eklemek yerine ortak bir üst öğeye tek bir dinleyici eklersiniz. Bunu, belirli eylemler için tüm 'alt öğelerini' izleyen tek bir 'gözetmene' benzetebilirsiniz.

Doğrudan Bağlama: Bir Sınırlama

Olayları .on() veya başka yöntemlerle doğrudan öğelere bağladığınızda dinleyici yalnızca tam o anda var olan öğelere eklenir. Daha sonra DOM'a eklenen yeni öğeler olay işleyicisini otomatik olarak almaz.

Örnekte önce başlangıçtaki düğmelere tıklamayı deneyin. Ardından kısa bir gecikme sonra yeni bir düğme görünür. Yeni düğmeye tıklamayı deneyin; yanıt vermez!

$(document).ready(function() {
  // Assume basic HTML structure like:
  // <div id="my-list">
  //   <button class="item">Button 1</button>
  //   <button class="item">Button 2</button>
  // </div>

  // Direct binding to existing items
  $('.item').on('click', function() {
    $(this).text('Directly clicked!');
  });

  // Simulate adding a new item after initial binding
  setTimeout(function() {
    $('#my-list').append('<button class="item">New Item</button>');
    console.log('A new item was added after 2 seconds.');
    console.log('Try clicking the new item - it wont respond!');
  }, 2000);
});

Olay Kabarmasını Anlama

Yetkilendirmeyi anlamak için olay kabarmasının ne olduğunu bilmeniz gerekir. Bir öğede tıklama gibi bir olay gerçekleştiğinde olay önce o öğede, sonra üst öğesinde, ardından onun üst öğesinde tetiklenir ve document öğesine kadar yukarı çıkar.

event.target özelliği, hangi üst öğenin yakaladığından bağımsız olarak her zaman olayı tetikleyen asıl öğeyi ifade eder. Aşağıdaki öğelere tıklayın ve konsol çıktısını gözlemleyin.

$(document).ready(function() {
  // Assume HTML like:
  // <div id="outer">
  //   <div id="middle">
  //     <button id="inner">Click Me</button>
  //   </div>
  // </div>

  $('#outer').on('click', function(event) {
    console.log('Outer div caught event. Target:', event.target.id || event.target.tagName);
  });

  $('#middle').on('click', function(event) {
    console.log('Middle div caught event. Target:', event.target.id || event.target.tagName);
  });

  $('#inner').on('click', function(event) {
    console.log('Inner button caught event. Target:', event.target.id || event.target.tagName);
  });
});

Yetkilendirme için jQuery .on()

jQuery'nin .on() yöntemi, ek bir selector bağımsız değişkeni verilerek olay yetkilendirmesi için kullanılabilir. Sözdizimi şöyledir:

$(parentSelector).on(event, childSelector, handler);

Burada olay dinleyicisi parentSelector öğesine eklenir. Ancak handler işlevi yalnızca olay, childSelector ile eşleşen bir alt öğeden kaynaklanıyorsa çalışır.

Olayları Yetkilendirme Örneği

Şimdi 2. Sahne'deki sorunu çözmek için olay yetkilendirmesini uygulayalım. Dinleyiciyi üst kapsayıcıya (#my-list) ekleyeceğiz; ancak yalnızca tıklama .item ile eşleşen bir öğeden geldiyse tepki vermesini sağlayacağız.

Yeni düğme göründüğünde artık tıklamalara yanıt verdiğine dikkat edin!

$(document).ready(function() {
  // Assume HTML structure like:
  // <div id="my-list">
  //   <button class="item">Button 1</button>
  //   <button class="item">Button 2</button>
  // </div>

  // Event delegation: listener on the parent (#my-list)
  // It listens for clicks on any descendant matching '.item'
  $('#my-list').on('click', '.item', function() {
    $(this).text('Delegated click!');
  });

  // Simulate adding a new item after delegation setup
  setTimeout(function() {
    $('#my-list').append('<button class="item">New Delegated Item</button>');
    console.log('A new item was added after 2 seconds.');
    console.log('Try clicking the new item - it WILL respond!');
  }, 2000);
});

Dinamik Öğeleri Yönetme

Önceki örnekte gösterilen temel avantaj, olay yetkilendirmesinin dinamik olarak eklenen öğeleri sorunsuz biçimde yönetmesidir.

Dinleyici sabit üst öğede bulunduğundan, childSelector ile eşleşen tüm yeni alt öğeler otomatik olarak bu tek dinleyicinin kapsamına girer. İçerik eklediğiniz her seferde olayları yeniden bağlamanız gerekmez!

Performans Artışı

Dinamik içeriği yönetmenin yanı sıra olay yetkilendirmesi önemli performans avantajları sunar:

Daha Az Dinleyici: Yüzlerce öğeye ayrı ayrı olay dinleyicisi eklemek yerine ortak üst öğelerine yalnızca bir dinleyici eklersiniz.
Daha Az Bellek Kullanımı: Daha az dinleyici, uygulamanızın daha az bellek tüketmesi anlamına gelir.
Daha Hızlı Başlangıç: Sayfa yüklenirken tarayıcı olay işleyicilerini ayarlamak için daha az zaman harcar.

Olaylar Ne Zaman Yetkilendirilmeli?

Olay yetkilendirmesi güçlü bir araçtır, ancak her zaman gerekli değildir. Kullanım için ideal senaryolar şunlardır:

Çok sayıda benzer öğeyle çalışırken (ör. uzun bir listedeki öğeler veya tablo satırları).
İlk sayfa yüklemesinden sonra öğeler DOM'a dinamik olarak ekleniyor veya DOM'dan kaldırılıyorsa.
Olay yönetiminde performans birincil öncelikse.

Yetkilendirme için En İyi Uygulamalar

Olay yetkilendirmesinden en iyi şekilde yararlanmak için şu en iyi uygulamaları izleyin:

En Yakın Sabit Üst Öğeyi Seçin: Sayfanız yüklendiğinde var olacağı garanti edilen en yakın üst öğeye yetkilendirin. Daha yakın bir üst öğe işe yarıyorsa document veya body öğelerine yetkilendirme yapmaktan kaçının.
$(this) Değerini Anlayın: Yetkilendirilmiş bir işleyicinin içinde $(this), dinleyicinin eklendiği üst öğeyi değil, childSelector ile eşleşen asıl öğeyi ifade eder.
Kabarmaya Dikkat Edin: Yetkilendirme için yararlı olsa da kabarma, yönetilmediğinde (ör. başka bir derste ele alınan event.stopPropagation() ile) bazen istenmeyen yan etkilere yol açabilir.

Bilginizi Test Edin

Aşağıdaki senaryolardan hangileri olay delegasyonu kullanmak için idealdir?

İnteraktif derste cevapla

Olay Delegasyonunu Özetleme

Harika iş çıkardınız! jQuery'de olay delegasyonunun temel ilkelerini öğrendiniz.

childSelector ile birlikte .on() kullanmanın, dinamik olarak eklenenler de dahil olmak üzere birden çok alt öğenin olaylarını tek bir üst öğe dinleyicisiyle yönetmenizi nasıl sağladığını ele aldık. Bu teknik, performansı artırmak, kodu basitleştirmek ve jQuery uygulamalarınızdaki dinamik içeriği verimli bir şekilde işlemek için çok önemlidir.

Delegasyonda ustalaşmanız, olay işleme kodunuzu sağlam ve ölçeklenebilir hâle getirecektir!

Başlamak ücretsiz

Yapay zeka eğitmeniyle JavaScript öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 22
Dersler: 48

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Sağlam Olay Yetkilendirmesi Uygulama” dersi ücretsiz mi?

Evet — “Sağlam Olay Yetkilendirmesi Uygulama” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve jQuery Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. jQuery Academy kursu toplamda 3 dersten oluşur.

“Sağlam Olay Yetkilendirmesi Uygulama” dersinde ne öğreneceğim?

Performansı artırmak için tek bir dinleyiciyle birden çok ve gelecekte oluşturulacak öğenin olaylarını ele almak üzere .on() kullanarak olay yetkilendirmenin ilkelerini ve avantajlarını öğrenin. jQuery Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

jQuery Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te jQuery Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 1. dersidir.

“Sağlam Olay Yetkilendirmesi Uygulama” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu jQuery Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her jQuery Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← jQuery Academy Sayfasına Dön