JavaScript Academy · Lekcja

preventDefault i stopPropagation

Proszę kontrolować domyślne zachowanie i propagację zdarzeń.

preventDefault i stopPropagation to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 3 z 4. 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 JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Kontrolowanie działania zdarzeń

Dwa mechanizmy pozwalają kontrolować zdarzenia: zatrzymanie domyślnej akcji przeglądarki oraz zatrzymanie przemieszczania się zdarzenia przez DOM.

Domyślne akcje

Wiele elementów ma wbudowane domyślne zachowania: odnośniki powodują nawigację, wysłanie formularza przeładowuje stronę, a pola wyboru zmieniają stan. Dzieje się tak, dopóki nie zostanie podjęta odpowiednia interwencja.

preventDefault

event.preventDefault anuluje domyślną akcję przeglądarki, jednocześnie pozwalając na wykonanie funkcji obsługi.

link.addEventListener("click", (e) => {
  e.preventDefault(); // stop navigation
  console.log("handled in JS");
});

preventDefault w formularzach

Częstym zastosowaniem jest zatrzymanie przeładowania strony przez formularz, aby można było obsłużyć jego wysłanie za pomocą JavaScript.

form.addEventListener("submit", (e) => {
  e.preventDefault();
  // send data via fetch instead
});

Propagacja zdarzeń

Po dotarciu do elementu docelowego zdarzenia propagują się w górę przez elementy nadrzędne, uruchamiając ich nasłuchiwacze. Dlatego kliknięcie elementu potomnego może wywołać funkcję obsługi elementu nadrzędnego.

stopPropagation

event.stopPropagation uniemożliwia dalszą propagację zdarzenia do elementów nadrzędnych. Bieżąca funkcja obsługi nadal kończy wykonywanie.

child.addEventListener("click", (e) => {
  e.stopPropagation(); // parent listeners will not fire
});

preventDefault a stopPropagation

Są to niezależne mechanizmy. preventDefault anuluje akcję przeglądarki, a stopPropagation zatrzymuje przemieszczanie się zdarzenia do innych elementów. Można użyć jednego z nich, obu albo żadnego.

e.preventDefault();   // no default action
e.stopPropagation();  // no bubbling

Inne nasłuchiwacze na tym samym elemencie

stopPropagation NIE zatrzymuje innych nasłuchiwaczy na tym samym elemencie. Nadal zostaną uruchomione.

el.addEventListener("click", (e) => e.stopPropagation());
el.addEventListener("click", () => console.log("still runs"));

stopImmediatePropagation

stopImmediatePropagation działa szerzej: zatrzymuje propagację w górę ORAZ uniemożliwia uruchomienie pozostałych nasłuchiwaczy na tym samym elemencie.

el.addEventListener("click", (e) => e.stopImmediatePropagation());
el.addEventListener("click", () => console.log("does NOT run"));

defaultPrevented

Można sprawdzić event.defaultPrevented, aby ustalić, czy wcześniejsza funkcja obsługi wywołała już preventDefault.

el.addEventListener("click", (e) => {
  console.log(e.defaultPrevented);
});

Używaj oszczędnie

Zatrzymywanie propagacji może zakłócić delegowanie zdarzeń w innych miejscach strony. Należy stosować je tylko wtedy, gdy jest to naprawdę konieczne, i rozważyć rozwiązania przyjazne delegowaniu.

Szybkie sprawdzenie

Wybierz właściwą metodę.

Podsumowanie

preventDefault anuluje domyślną akcję przeglądarki (nawigację, wysłanie formularza itp.). stopPropagation zatrzymuje propagację zdarzenia w górę do elementów nadrzędnych, a stopImmediatePropagation dodatkowo blokuje inne nasłuchiwacze na tym samym elemencie. Są to niezależne mechanizmy; zatrzymywanie propagacji należy stosować oszczędnie, aby nie zakłócać delegowania zdarzeń.

Często zadawane pytania

Czy lekcja „preventDefault i stopPropagation” jest bezpłatna?

Tak — pełny tekst „preventDefault i stopPropagation” 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 JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „preventDefault i stopPropagation”?

Proszę kontrolować domyślne zachowanie i propagację zdarzeń. Ćwiczysz JavaScript 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ąć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript 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 3 z 4.

Ile czasu zajmuje lekcja „preventDefault i stopPropagation”?

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 JavaScript Academy?

Tak. Każda lekcja JavaScript 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

← Powrót do JavaScript Academy