Özet - Olay yönetimi

JavaScript kursu · Orta seviye · Ders 42/134

Event delegation ve preventDefault ile çok sayıda düğmeyi tek dinleyiciyle yönetirsin.

Özet - Olay yönetimi

Bu grupta olayların nasıl yayıldığını ve nasıl kontrol edileceğini öğrendin. Kabarcıklanma olayın çocuktan ebeveyne çıkmasıdır; stopPropagation ile durdurulur. Event delegation ile tek dinleyici çok çocuğu yönetir.

list.addEventListener('click', (event) => {
  const link = event.target.closest('a');
  if (link) event.preventDefault();
});

preventDefault varsayılan davranışı engeller, once: true ise dinleyiciyi tek seferliğe sınırlar.

Uygulama Bağlantı tıklamasını delegasyon ile engelle

list değişkenini tanımla ve #list öğesini seç. Tek bir click dinleyicisi ekle. event.target.closest('a') ile tıklanan bağlantıyı bul ve event.preventDefault() ile varsayılan yönlendirmeyi engelle.

Örnek çözümü göster

const list = document.querySelector('#list');
list.addEventListener('click', (event) => {
  const link = event.target.closest('a');
  if (link) {
    event.preventDefault();
    console.log('link clicked');
  }
});

Uygulama button için once: true dinleyicisi ekle

button değişkenini tanımla ve #button öğesini seç. click dinleyicisi ekle ve üçüncü parametre olarak { once: true } seçeneğini ver.

Örnek çözümü göster

const button = document.querySelector('#button');
button.addEventListener('click', () => {
  console.log('clicked');
}, { once: true });

Kendini test et

Kavramları etkileriyle eşleştir

stopPropagation

Yayılma durur
preventDefault

Varsayılan engellenir
event.target.closest

Ata öğeyi bulur
once: true

Tek sefer çalışır

Delegasyonda ata öğeyi bul

list.addEventListener('click', (event) => {
  const link = event.target.____('a');
  if (link) { event.preventDefault(); }
});

Cevabı göster

list.addEventListener('click', (event) => {
  const link = event.target.closest('a');
  if (link) { event.preventDefault(); }
});

Orta seviye bölümündeki tüm dersler

1 Arrow fonksiyonlar

Özet - Olay yönetimi