JavaScript Academy · Lekcja

Zdarzenia niestandardowe

Proszę tworzyć i wysyłać własne zdarzenia.

Zdarzenia niestandardowe to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 4 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.

Poza wbudowanymi zdarzeniami

DOM pozwala tworzyć i wysyłać własne zdarzenia za pomocą CustomEvent. Oddziela to od siebie części aplikacji: jeden komponent ogłasza, że coś się wydarzyło, a inne nasłuchują bez bezpośredniego odwołania.

Tworzenie zdarzenia CustomEvent

Należy utworzyć je za pomocą new CustomEvent(name, options). Nazwa może być dowolnym wybranym ciągiem znaków.

const evt = new CustomEvent("cart:add");
console.log(evt.type); // "cart:add"

Wysyłanie zdarzenia

Zdarzenie należy wysłać do celu za pomocą dispatchEvent. Każdy listener zarejestrowany dla tej nazwy na celu (lub na elemencie nadrzędnym, jeśli zdarzenie propaguje się w górę) zostanie uruchomiony.

element.dispatchEvent(new CustomEvent("cart:add"));

Nasłuchiwanie zdarzenia

Należy nasłuchiwać dokładnie tak jak w przypadku zdarzenia natywnego, używając addEventListener z własną nazwą.

element.addEventListener("cart:add", () => {
  console.log("Something was added to the cart");
});

Przekazywanie danych za pomocą detail

Ładunek danych należy dołączyć za pomocą właściwości detail. Listenery odczytują go z event.detail.

const evt = new CustomEvent("cart:add", {
  detail: { id: 42, qty: 2 }
});
element.dispatchEvent(evt);

Odczytywanie ładunku danych

Wewnątrz listenera event.detail zawiera dowolną przekazaną wartość. Może nią być obiekt, tablica, ciąg znaków lub liczba.

element.addEventListener("cart:add", (e) => {
  console.log(e.detail.id, e.detail.qty); // 42 2
});

Włączanie propagacji w górę

Domyślnie własne zdarzenia NIE propagują się w górę. Należy ustawić bubbles: true, aby mogły je odbierać elementy nadrzędne i delegowane listenery.

const evt = new CustomEvent("cart:add", {
  bubbles: true,
  detail: { id: 42 }
});
child.dispatchEvent(evt); // parents can now listen

Opcja cancelable

Należy ustawić cancelable: true, aby umożliwić listenerom wywołanie preventDefault(). Kod wysyłający zdarzenie sprawdza wartość zwracaną przez dispatchEvent, aby ustalić, czy zdarzenie zostało anulowane.

const evt = new CustomEvent("form:submit", { cancelable: true });
const proceed = form.dispatchEvent(evt);
if (proceed) actuallySubmit();

Wzorzec rozdzielania zależności

Własne zdarzenia pozwalają modułom komunikować się bez wzajemnego importowania. Warstwa rejestrowania lub analityki może nasłuchiwać w document zdarzeń dotyczących całej aplikacji.

document.addEventListener("user:login", (e) => {
  analytics.track("login", e.detail.userId);
});
document.dispatchEvent(
  new CustomEvent("user:login", { detail: { userId: 7 } })
);

Konwencje nazewnictwa

Należy stosować przestrzenie nazw w nazwach zdarzeń (takie jak cart:add i user:login), aby uniknąć kolizji ze zdarzeniami natywnymi i wyraźnie grupować powiązane zdarzenia.

Stara i nowa składnia

W starszym kodzie można spotkać starsze API document.createEvent. Należy preferować nowoczesny konstruktor new CustomEvent(...); jest prostszy i jest jedyną formą, którą należy dziś pisać.

const evt = new CustomEvent("ready", { detail: 1 });

Szybki test

Sprawdzenie wiedzy o zdarzeniach niestandardowych.

Podsumowanie

Należy używać new CustomEvent(name, { detail, bubbles, cancelable }) i dispatchEvent do tworzenia własnych zdarzeń. Ładunek danych należy odczytywać za pomocą event.detail, włączać propagację w górę na potrzeby delegowania oraz używać cancelable w przypadku akcji, które można anulować. Własne zdarzenia rozdzielają zależności między komponentami, tworząc przejrzysty styl publikowania i subskrypcji.

Często zadawane pytania

Czy lekcja „Zdarzenia niestandardowe” jest bezpłatna?

Tak — pełny tekst „Zdarzenia niestandardowe” 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 „Zdarzenia niestandardowe”?

Proszę tworzyć i wysyłać własne zdarzenia. Ć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 4 z 4.

Ile czasu zajmuje lekcja „Zdarzenia niestandardowe”?

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