Zatrzymywanie propagacji zdarzeń
Proszę poznać .stopPropagation() i .preventDefault(), aby kontrolować przepływ zdarzeń, zapobiegać domyślnym działaniom przeglądarki i skutecznie zarządzać złożonymi interakcjami zdarzeń.
Zatrzymywanie propagacji zdarzeń to bezpłatna lekcja jQuery Academy na CoddyKit. To lekcja 2 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej jQuery Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs jQuery Academy zawiera 3 lekcji w sumie.
Przejmij kontrolę nad zdarzeniami!
Zdarzenia, takie jak kliknięcia lub wysłanie formularza, nie występują wyłącznie na jednym elemencie. Często przemieszczają się przez Document Object Model (DOM).
Umiejętność kontrolowania tego przepływu jest kluczowa podczas tworzenia precyzyjnych i interaktywnych stron internetowych.
Zapobieganie domyślnym działaniom
Przeglądarki wykonują domyślne działania dla wielu elementów HTML. Na przykład:
- Kliknięcie znacznika
<a>powoduje przejście do nowej strony. - Wysłanie elementu
<form>powoduje ponowne załadowanie strony.
Używamy event.preventDefault(), aby zatrzymać te wbudowane zachowania przeglądarki.
`preventDefault()` w działaniu
Spróbuj kliknąć poniższy link. Zwykle przeniósłby Cię do example.com, ale .preventDefault() zatrzymuje tę nawigację!
<!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>Zrozumienie propagacji zdarzeń
Gdy zdarzenie wystąpi na elemencie, na przykład po kliknięciu, nie uruchamia ono obsługi wyłącznie dla tego elementu. Zdarzenie „bąbelkuje” w górę drzewa DOM.
- Uruchamia listenery elementu nadrzędnego.
- Następnie elementu nadrzędnego wyższego poziomu.
- I tak dalej, aż do
<body>i<html>.
To przemieszczanie się w górę nazywamy propagacją zdarzeń.
Zatrzymaj bąbelkowanie: `stopPropagation()`
Czasami chcesz, aby zdarzenie zostało obsłużone wyłącznie przez element, na którym się rozpoczęło, lub przez konkretny element nadrzędny, bez wpływu na elementy wyższych poziomów.
W tym celu używamy event.stopPropagation(). Zatrzymuje ono dalsze bąbelkowanie zdarzenia w górę drzewa DOM.
Przykład `stopPropagation()`
Kliknij wewnętrzne pole. Bez stopPropagation() pojawiłyby się oba komunikaty. Z jego użyciem pojawia się tylko komunikat wewnętrznego pola, ponieważ bąbelkowanie zostaje zatrzymane.
<!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>Praktyczne zastosowania zatrzymywania bąbelkowania
stopPropagation() jest przydatne w sytuacjach takich jak:
- Okna modalne: Zapobieganie zamknięciu okna modalnego po kliknięciu wewnątrz niego, które wywołałoby kliknięcie nakładki.
- Zagnieżdżone listy rozwijane: Pozostawienie listy potomnej otwartej po kliknięciu jej elementu nadrzędnego.
- Złożone komponenty interfejsu: Zapewnienie, że listenery konkretnych komponentów nie będą zakłócać globalnych listenerów.
Obiekt zdarzenia
Zarówno .preventDefault(), jak i .stopPropagation() są metodami obiektu zdarzenia. Obiekt ten jest przekazywany jako argument do funkcji obsługującej zdarzenie.
Obiekt zdarzenia zawiera wiele przydatnych informacji o zdarzeniu, które wystąpiło, takich jak jego typ, element docelowy i współrzędne myszy.
<!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>Łączenie obu metod
Czasami trzeba użyć zarówno .preventDefault(), jak i .stopPropagation(). Metody te rozwiązują różne problemy:
.preventDefault(): Zatrzymuje domyślne działanie przeglądarki..stopPropagation(): Zatrzymuje przemieszczanie się zdarzenia w górę drzewa DOM.
Na przykład przycisk wewnątrz złożonego komponentu może wymagać zablokowania domyślnego działania po kliknięciu ORAZ zatrzymania kliknięcia, aby nie uruchomiło listenerów elementów nadrzędnych.
Zrozumienie kontroli zdarzeń
Masz link <a href="#" id="link"> wewnątrz elementu div <div id="container">. Chcesz zapobiec przejściu linku oraz uniemożliwić wywołanie zdarzenia kliknięcia przez dowolny handler na elemencie #container.
Podsumowanie: kontrola zdarzeń
Świetnie! Nauczyłeś(-aś) się kontrolować przepływ zdarzeń:
.preventDefault(): Zatrzymuje domyślne działanie przeglądarki dla zdarzenia, np. przejście za pomocą linku lub wysłanie formularza..stopPropagation(): Zapobiega bąbelkowaniu zdarzenia w górę drzewa DOM do elementów nadrzędnych.
Te potężne metody zapewniają precyzyjną kontrolę nad zachowaniem zdarzeń w aplikacjach internetowych, co prowadzi do bardziej przewidywalnych i niezawodnych doświadczeń użytkownika.
Ucz się JavaScript dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 22
- Lekcje
- 48
Często zadawane pytania
Czy lekcja „Zatrzymywanie propagacji zdarzeń” jest bezpłatna?
Tak — pełny tekst „Zatrzymywanie propagacji zdarzeń” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu jQuery Academy, przejdź na CoddyKit PRO. Kurs jQuery Academy zawiera 3 lekcji w sumie.
Co nauczysz się w „Zatrzymywanie propagacji zdarzeń”?
Proszę poznać .stopPropagation() i .preventDefault(), aby kontrolować przepływ zdarzeń, zapobiegać domyślnym działaniom przeglądarki i skutecznie zarządzać złożonymi interakcjami zdarzeń. Ćwiczysz jQuery Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć jQuery Academy?
Nie wymagamy żadnego doświadczenia. jQuery Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 3.
Ile czasu zajmuje lekcja „Zatrzymywanie propagacji zdarzeń”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji jQuery Academy?
Tak. Każda lekcja jQuery Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Solidna delegacja zdarzeń
- Zatrzymywanie propagacji zdarzeń
- Tworzenie i wywoływanie niestandardowych zdarzeń