JavaScript Academy · Lekcja

Dynamiczne listy z delegowaniem zdarzeń

Proszę zarządzać zdarzeniami elementów dodawanych w czasie działania aplikacji.

Dynamiczne listy z delegowaniem zdarzeń 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.

Problem dynamicznych elementów

Po bezpośrednim przypisaniu listenerów do elementów każdy element dodany do DOM później nie ma listenera. Delegowanie rozwiązuje ten problem, ponieważ listener elementu nadrzędnego przechwytuje również zdarzenia przyszłych elementów potomnych.

Bezpośrednie listenery przestają działać

W tym przypadku listener zostaje dodany do istniejących elementów. Nowo dołączony element nie otrzymuje niczego i pozostaje nieaktywny.

document.querySelectorAll(".item").forEach((el) =>
  el.addEventListener("click", handle)
);
list.appendChild(newItem); // newItem has NO handler

Delegowanie działa od razu

Gdy na elemencie nadrzędnym znajduje się delegowany listener, nowy element jest automatycznie obsługiwany. Po każdym wstawieniu nie trzeba ponownie przypisywać listenerów.

list.addEventListener("click", (e) => {
  const item = e.target.closest(".item");
  if (item) console.log("Clicked", item.dataset.id);
});
list.appendChild(newItem); // works immediately

Dodawanie elementów

Należy utworzyć nowe elementy i dołączyć je do DOM. Ponieważ element nadrzędny już deleguje zdarzenia, stają się interaktywne natychmiast po pojawieniu się.

function addItem(text) {
  const li = document.createElement("li");
  li.className = "item";
  li.textContent = text;
  list.appendChild(li);
}

Usuwanie elementów

Usuwanie również jest proste. Delegowany handler może wykryć przycisk usuwania wewnątrz wiersza i usunąć ten wiersz.

list.addEventListener("click", (e) => {
  if (e.target.matches(".delete-btn")) {
    e.target.closest(".item").remove();
  }
});

Rozróżnianie podakcji

Wiersz może zawierać kilka interaktywnych części. Należy użyć matches() lub closest(), aby ustalić, która z nich została kliknięta, a następnie wybrać odpowiednią gałąź obsługi.

list.addEventListener("click", (e) => {
  if (e.target.matches(".edit-btn")) edit(e);
  else if (e.target.matches(".delete-btn")) del(e);
});

Renderowanie na podstawie danych

Popularny wzorzec to przechowywanie stanu w tablicy, renderowanie na jego podstawie wierszy i delegowanie kliknięć. Ponowne renderowanie zastępuje elementy potomne, ale pojedynczy listener elementu nadrzędnego pozostaje niezmieniony.

function render(items) {
  list.innerHTML = items
    .map((i) => "<li class=\"item\" data-id=\"" + i.id + "\">" + i.name + "</li>")
    .join("");
}

Brak problemów z czyszczeniem

W przypadku listenerów przypisanych do poszczególnych elementów przed usunięciem węzłów należy pamiętać o wywołaniu removeEventListener, aby uniknąć wycieków pamięci. Delegowanie usuwa ten obowiązek: usunięcie elementu potomnego nie pozostawia osieroconego listenera.

Przełączanie klas

Delegowanie dobrze współpracuje z przełączaniem klas służących do oznaczania zaznaczenia. Handler znajduje wiersz i przełącza klasę.

list.addEventListener("click", (e) => {
  const row = e.target.closest(".item");
  if (row) row.classList.toggle("selected");
});

Odczytywanie stabilnej tożsamości

Ponieważ węzły DOM są zastępowane podczas ponownego renderowania, nigdy nie należy przechowywać odwołań do nich. Należy przechowywać stabilny identyfikator w data-id i wyszukiwać na jego podstawie dane w modelu wewnątrz handlera.

const id = e.target.closest(".item").dataset.id;
const record = state.find((r) => r.id === id);

Dotyczy to również zdarzeń pól formularzy

Delegowanie nie ogranicza się do kliknięć. W ten sam sposób można delegować zdarzenia input lub change dla dynamicznie dodawanych pól formularzy.

form.addEventListener("input", (e) => {
  if (e.target.matches(".qty")) recalc(e.target);
});

Szybki test

Dynamiczne listy i delegowanie zdarzeń.

Podsumowanie

Delegowanie doskonale sprawdza się w przypadku dynamicznych list: jeden listener elementu nadrzędnego obsługuje obecne i przyszłe elementy potomne, przetrwa ponowne renderowanie i nie wymaga czyszczenia listenerów poszczególnych węzłów. Należy używać matches() i closest() do rozdzielania podakcji oraz przechowywać stabilne identyfikatory w data-*, aby handlery mogły odnaleźć model danych.

Często zadawane pytania

Czy lekcja „Dynamiczne listy z delegowaniem zdarzeń” jest bezpłatna?

Tak — pełny tekst „Dynamiczne listy z delegowaniem 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 „Dynamiczne listy z delegowaniem zdarzeń”?

Proszę zarządzać zdarzeniami elementów dodawanych w czasie działania aplikacji. Ć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 „Dynamiczne listy z delegowaniem 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