jQuery Academy · Ders

Olay Yayılımını Durdurma

2. ders / 311 adım

Olay Yayılımını Durdurma, CoddyKit'te ücretsiz bir jQuery Academy dersidir. Bu, 3 dersinin 2. 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.

Olaylarınızı Denetleyin!

Tıklamalar veya form gönderimleri gibi olaylar yalnızca tek bir öğede gerçekleşmez. Bu olaylar çoğunlukla Belge Nesne Modeli (DOM) boyunca ilerler.

Bu akışı denetlemeyi öğrenmek, kesin ve etkileşimli web sayfaları oluşturmanın anahtarıdır.

Varsayılan Eylemleri Önleme

Tarayıcıların birçok HTML öğesi için varsayılan eylemleri vardır. Örneğin:

Bir <a> etiketine tıklamak yeni bir sayfaya yönlendirir.
Bir <form> göndermek sayfayı yeniden yükler.

Bu yerleşik tarayıcı davranışlarını durdurmak için event.preventDefault() kullanırız.

`preventDefault()` İş Başında

Aşağıdaki bağlantıya tıklamayı deneyin. Normalde example.com adresine yönlendirilirdiniz; ancak .preventDefault() bu yönlendirmeyi durdurur!

<!DOCTYPE html>
<html>
<head>
<title>Prevent Default</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <h1>Prevent Default Example</h1>
  <a href="https://example.com" id="myLink">Click Me! (Should not navigate)</a>
  <div id="output"></div>

  <script>
  $(document).ready(function() {
    $('#myLink').on('click', function(event) {
      event.preventDefault(); // Stop the link from navigating
      $('#output').append('<p>Link click prevented! You\'re still here.</p>');
    });
  });
  </script>
</body>
</html>

Olay Kabarcıklanmasını Anlama

Bir öğede (örneğin bir tıklama sırasında) olay gerçekleştiğinde, yalnızca o öğedeki işleyicileri tetiklemez. DOM ağacında yukarı doğru 'kabarcıklanır'.

Üst öğesindeki işleyicileri tetikler.
Ardından onun üst öğesindeki işleyicileri tetikler.
Bu şekilde <body> ve <html> öğelerine kadar devam eder.

Bu yukarı doğru ilerlemeye olay kabarcıklanması adı verilir.

Kabarcığı Durdurun: `stopPropagation()`

Bazen bir olayın yalnızca kaynaklandığı öğe veya belirli bir üst öğe tarafından işlenmesini ve daha üst düzey öğeleri etkilememesini istersiniz.

İşte bu noktada event.stopPropagation() devreye girer. Olayın DOM ağacında daha yukarı doğru kabarcıklanmasını durdurur.

`stopPropagation()` Örneği

İç kutuya tıklayın. stopPropagation() olmadan her iki ileti de görünürdü. Kullanıldığında ise yalnızca iç kutunun iletisi görünür; çünkü kabarcıklanma durdurulur.

<!DOCTYPE html>
<html>
<head>
<title>Stop Propagation</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  #outer {
    padding: 20px;
    background-color: lightblue;
    border: 1px solid blue;
    margin: 10px;
  }
  #inner {
    padding: 20px;
    background-color: lightcoral;
    border: 1px solid red;
    margin-top: 10px;
  }
</style>
</head>
<body>
  <h1>Stop Propagation Example</h1>
  <div id="outer">
    Outer Div (Click me!)
    <div id="inner">
      Inner Div (Click me!)
    </div>
  </div>
  <div id="log"></div>

  <script>
  $(document).ready(function() {
    $('#outer').on('click', function() {
      $('#log').append('<p>Outer Div clicked!</p>');
    });

    $('#inner').on('click', function(event) {
      event.stopPropagation(); // Stop bubbling here
      $('#log').append('<p>Inner Div clicked!</p>');
    });
  });
  </script>
</body>
</html>

Kabarcıklanmayı Durdurmanın Pratik Kullanımları

stopPropagation() şu gibi durumlarda kullanışlıdır:

Modal iletişim kutuları: Bir modalın içindeki tıklamaların, üst katmandaki tıklamayı tetikleyerek modalı kapatmasını önlemek.
İç içe açılır menüler: Üst öğesine tıklandığında alt açılır menünün açık kalmasını sağlamak.
Karmaşık kullanıcı arayüzü bileşenleri: Belirli bileşenlere ait olay işleyicilerinin genel dinleyicileri etkilememesini sağlamak.

Olay Nesnesi

Hem .preventDefault() hem de .stopPropagation(), olay nesnesinin yöntemleridir. Bu nesne, olay işleyicisi işlevinize bağımsız değişken olarak aktarılır.

Olay nesnesi; türü, hedef öğesi ve fare koordinatları gibi gerçekleşen olay hakkında birçok yararlı bilgi içerir.

<!DOCTYPE html>
<html>
<head>
<title>Event Object</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <h1>Event Object Properties</h1>
  <button id="myButton">Click Me</button>
  <div id="output"></div>

  <script>
  $(document).ready(function() {
    $('#myButton').on('click', function(event) {
      $('#output').empty(); // Clear previous output
      $('#output').append('<p>Event Type: <code>' + event.type + '</code></p>');
      $('#output').append('<p>Target Element ID: <code>' + event.target.id + '</code></p>');
      $('#output').append('<p>Mouse X Position: <code>' + event.pageX + '</code></p>');
      $('#output').append('<p>Mouse Y Position: <code>' + event.pageY + '</code></p>');
    });
  });
  </script>
</body>
</html>

Her İki Yöntemi Birleştirme

Bazen hem .preventDefault() hem de .stopPropagation() kullanmanız gerekir. Bu yöntemler farklı sorunları çözer:

.preventDefault(): Tarayıcının varsayılan eylemini durdurur.
.stopPropagation(): Olayın DOM içinde yukarı doğru ilerlemesini durdurur.

Örneğin karmaşık bir bileşenin içindeki bir düğmenin, varsayılan tıklama davranışını önlemesi VE tıklamanın üst öğelerdeki işleyicileri tetiklemesini durdurması gerekebilir.

Olay Denetimini Anlama

Bir div öğesinin <div id="container"> içinde <a href="#" id="link"> bağlantısına sahipsiniz. Bağlantının yönlendirme yapmasını ve tıklama olayının #container üzerindeki herhangi bir işleyiciyi tetiklemesini de önlemek istiyorsunuz.

İnteraktif derste cevapla

Özet: Olay Denetimi

Harika iş çıkardınız! Olay akışını denetlemeyi öğrendiniz:

.preventDefault(): Bir olayın tarayıcıdaki varsayılan eylemini durdurur (ör. bağlantı yönlendirmesi, form gönderimi).
.stopPropagation(): Bir olayın DOM ağacında üst öğelere doğru kabarcıklanmasını önler.

Bu güçlü yöntemler, web uygulamalarınızdaki olayların nasıl davranacağı üzerinde kesin denetim kurmanızı sağlar ve daha öngörülebilir, sağlam kullanıcı deneyimleri sunmanıza yardımcı olur.

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

“Olay Yayılımını Durdurma” dersi ücretsiz mi?

Evet — “Olay Yayılımını Durdurma” 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.

“Olay Yayılımını Durdurma” dersinde ne öğreneceğim?

Olay akışını denetlemek, tarayıcının varsayılan eylemlerini önlemek ve karmaşık olay etkileşimlerini etkili şekilde yönetmek için .stopPropagation() ve .preventDefault() yöntemlerini anlayın. 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 2. dersidir.

“Olay Yayılımını Durdurma” 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