JavaScript Academy · Ders

preventDefault ve stopPropagation

Varsayılan davranışı ve kabarcıklanmayı kontrol edin.

preventDefault ve stopPropagation, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 3. 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, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

Olay Davranışını Denetleme

Olayları denetlemenizi sağlayan iki mekanizma vardır: tarayıcının varsayılan eylemini durdurmak ve olayın DOM içinde ilerlemesini durdurmak.

Varsayılan Eylemler

Birçok öğenin yerleşik varsayılan davranışları vardır: bağlantılar gezinir, form gönderimleri sayfayı yeniden yükler ve onay kutuları durum değiştirir. Siz müdahale etmedikçe bunlar gerçekleşir.

preventDefault

event.preventDefault, tarayıcının varsayılan eylemini iptal ederken işleyicinizin çalışmasına izin verir.

link.addEventListener("click", (e) => {
  e.preventDefault(); // stop navigation
  console.log("handled in JS");
});

Formlarda preventDefault

Yaygın bir kullanım, JavaScript ile gönderimi işleyebilmeniz için formun sayfayı yeniden yüklemesini durdurmaktır.

form.addEventListener("submit", (e) => {
  e.preventDefault();
  // send data via fetch instead
});

Olay Yayılımı

Olaylar hedefe ulaştıktan sonra üst öğelerden geçerek yukarı doğru kabarcıklanır ve bu öğelerin dinleyicilerini tetikler. Bu nedenle bir alt öğeye yapılan tıklama, üst öğenin işleyicisini çalıştırabilir.

stopPropagation

event.stopPropagation, olayın üst öğelere doğru ilerlemesini engeller. Mevcut işleyici çalışmasını tamamlar.

child.addEventListener("click", (e) => {
  e.stopPropagation(); // parent listeners will not fire
});

preventDefault ve stopPropagation Arasındaki Fark

Bunlar birbirinden bağımsızdır. preventDefault tarayıcı eylemini iptal eder; stopPropagation ise diğer öğelere doğru ilerlemeyi durdurur. Bunlardan birini, ikisini veya hiçbirini kullanmayabilirsiniz.

e.preventDefault();   // no default action
e.stopPropagation();  // no bubbling

Aynı Öğedeki Diğer Dinleyiciler

stopPropagation, aynı öğedeki diğer dinleyicilerin çalışmasını durdurmaz (NOT); onlar yine çalışır.

el.addEventListener("click", (e) => e.stopPropagation());
el.addEventListener("click", () => console.log("still runs"));

stopImmediatePropagation

stopImmediatePropagation daha ileri gider: kabarcıklanmayı durdurur VE aynı öğede kalan dinleyicilerin çalışmasını engeller.

el.addEventListener("click", (e) => e.stopImmediatePropagation());
el.addEventListener("click", () => console.log("does NOT run"));

defaultPrevented

event.defaultPrevented ile daha önceki bir işleyicinin preventDefault çağrısı yapıp yapmadığını kontrol edebilirsiniz.

el.addEventListener("click", (e) => {
  console.log(e.defaultPrevented);
});

Ölçülü Kullanın

Yayılımı durdurmak, sayfanın başka yerlerindeki olay yetkilendirmesini bozabilir. Bunu yalnızca gerçekten gerekli olduğunda tercih edin ve olay yetkilendirmeyle uyumlu alternatifleri değerlendirin.

Hızlı Kontrol

Doğru yöntemi seçin.

Özet

preventDefault, tarayıcının varsayılan eylemini (gezinme, gönderim vb.) iptal eder. stopPropagation, olayın üst öğelere doğru kabarcıklanmasını durdururken stopImmediatePropagation aynı öğedeki diğer dinleyicileri de engeller. Bunlar birbirinden bağımsız araçlardır; olay yetkilendirmesini bozmamak için yayılımı durdurma yöntemlerini ölçülü kullanın.

Sıkça Sorulan Sorular

“preventDefault ve stopPropagation” dersi ücretsiz mi?

Evet — “preventDefault ve stopPropagation” 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 JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“preventDefault ve stopPropagation” dersinde ne öğreneceğim?

Varsayılan davranışı ve kabarcıklanmayı kontrol edin. JavaScript 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.

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

Önceden deneyim gerekmez. CoddyKit'te JavaScript 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, 4 dersinin 3. dersidir.

“preventDefault ve stopPropagation” 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 JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript 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

← JavaScript Academy Sayfasına Dön