stopPropagation

JavaScript kursu · Orta seviye · Ders 38/134

Bir olayın yukarı yayılmasını durdurmayı ve ne zaman kullanılacağını öğrenirsin.

stopPropagation

Bazen bir olayın ebeveyne yayılmasını istemezsin. event.stopPropagation() metodu, olayın daha yukarıdaki öğelere ulaşmasını engeller. Çocuk dinleyicisi çalışır ama ebeveyn dinleyicisi tetiklenmez.

child.addEventListener('click', (event) => {
  event.stopPropagation();
});

Bunu yalnızca gerçekten gerekli olduğunda kullan; aksi halde ata öğelerdeki dinleyiciler çalışmaz ve beklenmedik davranışlar ortaya çıkar. Olayın yalnızca hedef öğeyle ilgili olduğundan eminsen kullanmak mantıklıdır.

Capture ve bubble aşamaları

Bir olay üç aşamadan geçer: capture (ebeveynden çocuğa iner), target (hedef öğede) ve bubble (çocuktan ebeveyne çıkar). Varsayılan olarak dinleyiciler bubble aşamasında çalışır.

parent.addEventListener('click', handler, true);

Üçüncü parametre olarak true verirsen dinleyici capture aşamasında çalışır; yani ebeveyn, çocuktan önce tetiklenir. Genellikle bubble aşaması yeterlidir.

Uygulama child dinleyicisinde yayılmayı durdur

child değişkenini tanımla ve #child öğesini seç. click dinleyicisi ekle ve içinde event.stopPropagation() çağırarak olayın ebeveyne yayılmasını durdur.

Örnek çözümü göster

const child = document.querySelector('#child');
child.addEventListener('click', (event) => {
  event.stopPropagation();
  console.log('child');
});

Kendini test et

event.stopPropagation() ne yapar?
```
child.addEventListener('click', (event) => {
  event.stopPropagation();
});
```
- Olayın varsayılan davranışını engeller
- Dinleyiciyi listeden kaldırır
- Olayı yeniden tetikler
- Olayın ebeveyne yayılmasını durdurur
Cevabı göster

Olayın ebeveyne yayılmasını durdurur — Doğru! stopPropagation olayın yukarı yayılmasını durdurur.

Yayılmayı durdur

child.addEventListener('click', (event) => {
  event.____();
});

Cevabı göster

child.addEventListener('click', (event) => {
  event.stopPropagation();
});

Aşamaları yönleriyle eşleştir

stopPropagation

Yayılmayı durdurur
Capture aşaması

Ebeveynden çocuğa
Bubble aşaması

Çocuktan ebeveyne

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

stopPropagation