JavaScript Academy · Ders

Yakalama ve Kabarcıklanma Aşamaları

Olayların DOM içinde nasıl ilerlediğini anlayın.

Yakalama ve Kabarcıklanma Aşamaları, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 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, 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.

DOM İçinde İki Geçiş

Bir öğeye tıkladığınızda olay yalnızca o öğede gerçekleşmez. Olay, DOM ağacında iki aşamadan geçer: yakalama aşaması (document'tan hedefe doğru yukarıdan aşağıya) ve kabarcıklanma aşaması (hedefte başlayıp document'a geri doğru aşağıdan yukarıya).

<div id="outer">
  <button id="inner">Click</button>
</div>

Varsayılan: Kabarcıklanma

Varsayılan olarak addEventListener, kabarcıklanma aşaması sırasında dinler. İçteki düğmeye tıklamak önce onun işleyicisini, ardından üst öğesindeki işleyiciyi, sonra üst öğenin üstündeki işleyiciyi ve bu şekilde document'a kadar çalıştırır.

inner.addEventListener("click", () => console.log("inner"));
outer.addEventListener("click", () => console.log("outer"));
// Click inner -> logs: "inner" then "outer"

Yakalamayı Etkinleştirme

Bunun yerine yakalama aşaması sırasında dinlemek için üçüncü bağımsız değişken olarak true (veya { capture: true }) geçirin. Yakalama işleyicileri, kabarcıklanma işleyicilerinden önce yukarıdan aşağıya çalışır.

outer.addEventListener("click", () => console.log("outer capture"), true);
inner.addEventListener("click", () => console.log("inner bubble"));
// Click inner -> "outer capture" then "inner bubble"

Tam Sıralama

#inner için her iki aşamada da işleyiciler bulunduğunda sıralama şöyledir: yukarıdan aşağıya yakalama aşaması, ardından hedef, sonra aşağıdan yukarıya kabarcıklanma aşaması.

document yakalama
outer yakalama
inner (hedef)
outer kabarcıklanma
document kabarcıklanma

event.target ve event.currentTarget

event.target, olayı gerçekten tetikleyen öğedir (tıklamanın gerçekleştiği yer). event.currentTarget, işleyicisi o anda çalışan öğedir. Kabarcıklanan bir üst öğe işleyicisinde bu ikisi farklıdır.

outer.addEventListener("click", (e) => {
  console.log(e.target.id);        // "inner" - where click occurred
  console.log(e.currentTarget.id); // "outer" - listener owner
});

Yayılımı Durdurma

event.stopPropagation() ilerleyişi durdurur: olay, geçerli aşamada sonraki öğeye devam etmez. Ağacın üst kısımlarındaki üst öğe işleyicileri hiç çalışmaz.

inner.addEventListener("click", (e) => {
  e.stopPropagation();
  console.log("handled here only");
});
outer.addEventListener("click", () => console.log("never runs"));

stopImmediatePropagation

stopPropagation() aynı öğe üzerindeki diğer dinleyicilerin çalışmasına yine izin verir. Aynı öğedeki kardeş dinleyicileri de engellemek için event.stopImmediatePropagation() kullanın.

inner.addEventListener("click", (e) => {
  e.stopImmediatePropagation();
  console.log("first only");
});
inner.addEventListener("click", () => console.log("blocked"));

preventDefault Farklıdır

preventDefault() ile stopPropagation() işlevlerini karıştırmayın. preventDefault() tarayıcının varsayılan eylemini (bağlantıyı izleme, form gönderme) iptal eder, ancak olayın kabarmasını NOT durdurur.

link.addEventListener("click", (e) => {
  e.preventDefault();  // do not navigate
  // event still bubbles to parents
});

Yakalama Neden Nadiren Kullanılır

Çoğu kod kabarmayı kullanır; çünkü bu, sezgilerimizle örtüşür: belirli öğe önce tepki verir, ardından kapsayıcılar olayı öğrenir. Yakalama, bir üst öğenin alt öğeler olayı görmeden önce olayı engellemesi veya reddetmesi gerektiğinde kullanışlıdır.

Aşamanın Denetlenmesi

event.eventPhase hangi aşamanın etkin olduğunu bildirir: 1 yakalama, 2 hedefte olma, 3 kabarma. Buna nadiren ihtiyaç duyulur, ancak karmaşık dinleyici zincirlerinde hata ayıklamaya yardımcı olur.

el.addEventListener("click", (e) => {
  console.log(e.eventPhase); // 1, 2, or 3
}, true);

Her Olay Kabarmaz

Çoğu kullanıcı arayüzü olayı (click, input, keydown) kabarır. focus, blur ve mouseenter gibi birkaç olay varsayılan olarak kabarmaz. Bunlar için kabaran karşılıkları (focusin, focusout) veya yakalama aşamasını kullanın.

Hızlı Kontrol

Olay aşamalarını kavrayışınızı sınayın.

Özet

Olaylar önce yakalama (aşağı), ardından kabarma (yukarı) aşamalarından geçer. Dinleyiciler varsayılan olarak kabarmayı kullanır; yakalama için true geçirin. e.target başlangıç noktasıdır, e.currentTarget ise dinleyicinin sahibidir. Geçişi durdurmak için stopPropagation(), varsayılan eylemleri iptal etmek için preventDefault() kullanın. Bu iki aşama, olay delegasyonunun temelini oluşturur.

Sıkça Sorulan Sorular

“Yakalama ve Kabarcıklanma Aşamaları” dersi ücretsiz mi?

Evet — “Yakalama ve Kabarcıklanma Aşamaları” 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.

“Yakalama ve Kabarcıklanma Aşamaları” dersinde ne öğreneceğim?

Olayların DOM içinde nasıl ilerlediğini anlayın. 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 1. dersidir.

“Yakalama ve Kabarcıklanma Aşamaları” 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