W świecie JavaScript, zdarzenia są podstawowym sposobem interakcji użytkownika z aplikacją. Często zdarza się, że zdarzenia są zagnieżdżone – na przykład kliknięcie przycisku umieszczonego wewnątrz diva. Domyślnie, zdarzenie będzie “bąblować” w górę przez drzewo DOM, od elementu najbardziej zagnieżdżonego, do korzenia dokumentu. W niektórych przypadkach, chcielibyśmy zatrzymać tę propagację, aby zdarzenie nie było obsługiwane przez elementy nadrzędne. W tej lekcji pokażemy, jak to zrobić.
Przykład zatrzymania propagacji zdarzenia
Załóżmy, że mamy prosty formularz HTML z przyciskiem, który znajduje się wewnątrz elementu <div>. Chcemy obsłużyć kliknięcie przycisku, ale nie chcemy, aby zdarzenie kliknięcia propagowało się poza przycisk.
Kod HTML i JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Zatrzymanie propagacji zdarzenia</title>
</head>
<body>
<div id="divContainer" style="padding: 20px; border: 1px solid #000;">
<!-- Div zawierający przycisk -->
<button id="myButton">Kliknij mnie</button>
<!-- Przycisk do kliknięcia -->
</div>
<script>
// Funkcja obsługująca kliknięcie przycisku
document.getElementById('myButton')
.addEventListener('click', function(event) {
alert('Przycisk został kliknięty!');
// Zatrzymanie propagacji zdarzenia
event.stopPropagation();
});
// Funkcja obsługująca kliknięcie na div
document.getElementById('divContainer')
.addEventListener('click', function() {
alert('Kliknięto div!');
});
</script>
</body>
</html>
W powyższym kodzie, mamy dwa elementy: <div> i <button>. Do obu tych elementów dodaliśmy nasłuchiwanie zdarzeń kliknięcia. Dla przycisku, wewnątrz funkcji obsługującej zdarzenie, używamy event.stopPropagation(), aby zatrzymać propagację zdarzenia. Oznacza to, że po kliknięciu przycisku, zobaczymy tylko alert “Przycisk został kliknięty!” i zdarzenie nie będzie dalej propagowane do elementu <div>, co zapobiegnie wyświetleniu alertu “Kliknięto div!”.
Podsumowanie
Zatrzymanie propagacji zdarzeń w JavaScript jest ważną techniką, która pozwala na kontrolowanie zachowania zdarzeń w aplikacji. Dzięki event.stopPropagation(), można łatwo zapobiec niespodziewanemu zachowaniu, które mogłoby wystąpić w wyniku bąbelkowania zdarzeń w drzewie DOM. Jest to szczególnie przydatne w złożonych interfejsach użytkownika, gdzie wiele zdarzeń jest obsługiwanych na różnych poziomach zagnieżdżenia.
Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video JavaScript w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.