Czym jest propagacja zdarzeń w JavaScript?

By /

JavaScript

Propagacja zdarzeń to mechanizm w JavaScript, dzięki któremu zdarzenia przechodzą przez trzy fazy: przechwytywanie (capturing), docelowe wykonanie (target), oraz bąbelkowanie (bubbling). Ten mechanizm umożliwia precyzyjne kontrolowanie sposobu, w jaki obsługiwane są zdarzenia, szczególnie gdy mamy do czynienia z zagnieżdżonymi elementami.

Przykład użycia propagacji zdarzeń

W tym przykładzie zobaczymy, jak propagacja zdarzeń może być wykorzystana w praktyce. Utworzymy prosty kod HTML z zagnieżdżonymi elementami oraz skrypt JavaScript, który będzie nasłuchiwał zdarzeń kliknięcia na różnych poziomach.

Kod HTML
<!DOCTYPE html>
<html>
<head>
    <title>Propagacja zdarzeń w JavaScript</title>
</head>
<body>
    <div id="outer" style="padding: 20px; background-color: lightblue;">
        Zewnętrzny DIV
        <div id="inner" style="padding: 20px; background-color: lightcoral;">
            Wewnętrzny DIV
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>
Kod JavaScript (script.js)
// Dodanie nasłuchiwaczy do elementów
document.getElementById('outer').addEventListener('click', function() {
    // false oznacza, że nasłuchiwacz jest 
    // uruchamiany w fazie bąbelkowania
    alert('Kliknięto zewnętrzny DIV!');
}, false); =

document.getElementById('inner')
   .addEventListener('click', function(event) {
    alert('Kliknięto wewnętrzny DIV!');
    // Zatrzymuje propagację, więc zewnętrzny
    // DIV nie odbierze zdarzenia
    event.stopPropagation(); 
}, false);

Wyjaśnienie

W powyższym przykładzie, kliknięcie na inner DIV wywoła alert z tekstem “Kliknięto wewnętrzny DIV!” i zatrzyma propagację zdarzenia dzięki event.stopPropagation(). Oznacza to, że zdarzenie nie dotrze do outer DIV, mimo że z technicznego punktu widzenia kliknięcie na element wewnętrzny również jest kliknięciem na element zewnętrzny.

Jeśli usuniemy event.stopPropagation(), kliknięcie na inner DIV spowoduje pojawienie się obu alertów – najpierw dla wewnętrznego DIV, a następnie dla zewnętrznego. Pokazuje to, jak zdarzenia “bąbelkują” od najgłębiej zagnieżdżonego elementu do najbardziej zewnętrznego.

Podsumowanie

Propagacja zdarzeń w JavaScript pozwala na zaawansowaną kontrolę nad obsługą zdarzeń w aplikacjach webowych. Mechanizm ten oferuje dwa tryby propagacji – bąbelkowanie i przechwytywanie, co umożliwia wybór najbardziej odpowiedniego sposobu obsługi zdarzeń, w zależności od kontekstu. Zrozumienie i właściwe wykorzystanie propagacji zdarzeń jest kluczowe dla tworzenia interaktywnych i użytkowych interfejsów webowych.

 

Powiązane artykuły

Scroll to Top