JavaScript Academy · Lekcja

Wzorzec delegowania zdarzeń

Proszę obsługiwać zdarzenia wielu elementów potomnych za pomocą jednego nasłuchiwacza rodzica.

Wzorzec delegowania zdarzeń to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 2 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.

Jeden listener do obsługi wszystkich

Delegowanie zdarzeń oznacza przypisanie jednego listenera do wspólnego elementu nadrzędnego zamiast wielu listenerów do poszczególnych elementów potomnych. Ponieważ zdarzenia propagują się w górę, element nadrzędny otrzymuje kliknięcia ze wszystkich swoich elementów potomnych.

<ul id="menu">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

Podejście naiwne

Bez delegowania należałoby przejść w pętli przez każdy element i przypisać mu handler. Jest to nieefektywne: wymaga więcej pamięci i nie działa dla elementów dodanych później.

document.querySelectorAll("#menu li").forEach((li) => {
  li.addEventListener("click", () => console.log(li.textContent));
});

Podejście z delegowaniem

Zamiast tego należy przypisać jeden listener do elementu nadrzędnego i sprawdzać event.target, aby ustalić, który element potomny został kliknięty.

const menu = document.getElementById("menu");
menu.addEventListener("click", (e) => {
  console.log(e.target.textContent);
});

Dopasowanie właściwego celu

Kliknięcie może trafić w zagnieżdżony element. Należy użyć event.target.closest(selector), aby przejść w górę drzewa i znaleźć odpowiedni element nadrzędny pasujący do selektora.

menu.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item) return; // clicked outside any li
  console.log("Clicked:", item.textContent);
});

Zabezpieczenie za pomocą sprawdzenia

Zawsze należy obsłużyć kliknięcia, które nie pasują do wzorca. Wczesne wyjście if (!item) return; chroni handler przed awarią, gdy użytkownik kliknie dopełnienie lub odstęp wewnątrz kontenera.

menu.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item || !menu.contains(item)) return;
  handleSelect(item);
});

Używanie atrybutów danych

Popularny wzorzec polega na przechowywaniu identyfikatora lub akcji w każdym elemencie za pomocą atrybutu data-*. Delegowany handler odczytuje tę wartość z dopasowanego elementu.

menu.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item) return;
  const id = item.dataset.id;   // reads data-id
  console.log("Selected id:", id);
});

Rozdzielanie obsługi według akcji

W przypadku pasków narzędzi z wieloma przyciskami należy nadać każdemu z nich atrybut data-action i wybrać działanie na jego podstawie. Jeden listener obsługuje każdy przycisk.

toolbar.addEventListener("click", (e) => {
  const btn = e.target.closest("button");
  if (!btn) return;
  switch (btn.dataset.action) {
    case "save": save(); break;
    case "delete": remove(); break;
  }
});

Dlaczego to rozwiązanie się skaluje

Dzięki delegowaniu lista zawierająca 1000 wierszy potrzebuje tylko jednego listenera zamiast 1000. Oznacza to mniejsze zużycie pamięci, szybszą konfigurację i brak pętli czyszczącej, gdy wiersze się zmieniają.

Uwaga dotycząca wydajności

Delegowanie ma jednak niewielki koszt: przy każdym pasującym zdarzeniu uruchamiany jest handler, który następnie filtruje zdarzenie. W większości aplikacji jest to pomijalne w porównaniu z uzyskanymi oszczędnościami, ale w przypadku bardzo często występujących zdarzeń, takich jak mousemove, należy unikać przypisywania delegowanych listenerów do document.

Wybór kontenera

Należy wybrać najbliższy stabilny element nadrzędny zawierający wszystkie cele. Delegowanie do małego kontenera (samej listy) jest lepsze niż delegowanie do document, ponieważ mniej niezwiązanych zdarzeń uruchamia handler.

const list = document.querySelector(".task-list");
list.addEventListener("click", onTaskClick);

Połączenie z closest

closest() jest podstawą delegowania. Zwraca sam element, jeśli pasuje do wzorca, najbliższy pasujący element nadrzędny albo null. Dzięki temu można bezpiecznie stosować delegowanie w przypadku zagnieżdżonego kodu HTML.

const cell = e.target.closest("td[data-col]");
if (cell) console.log(cell.dataset.col);

Szybki test

Dlaczego warto używać delegowania zdarzeń?

Podsumowanie

Delegowanie zdarzeń przypisuje jeden listener do elementu nadrzędnego i wykorzystuje propagację w górę do obsługi wszystkich elementów potomnych. Należy użyć e.target.closest(selector), aby znaleźć odpowiedni element, zastosować wczesny zwrot ochronny i odczytywać atrybuty data-* w celu rozdzielania akcji. To rozwiązanie skaluje się do ogromnych list i jest standardowym wzorcem dla dynamicznych interfejsów użytkownika.

Często zadawane pytania

Czy lekcja „Wzorzec delegowania zdarzeń” jest bezpłatna?

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

Co nauczysz się w „Wzorzec delegowania zdarzeń”?

Proszę obsługiwać zdarzenia wielu elementów potomnych za pomocą jednego nasłuchiwacza rodzica. Ć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 2 z 4.

Ile czasu zajmuje lekcja „Wzorzec delegowania 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 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