20. Obsługa zdarzeń w React — SyntheticEvent

SyntheticEvent — React owija zdarzenia przeglądarki

React nie podłącza event listenerów bezpośrednio do elementów DOM. Zamiast tego używa event delegation (jeden listener na root) i owija natywne zdarzenia przeglądarki w SyntheticEvent — cross-browser wrapper z jednolitym API. Obsługa zdarzeń: camelCase props (onClick, onChange, onSubmit).

Obsługa zdarzeń jest w każdym komponencie React. Zrozumienie SyntheticEvent, event delegation i różnic od vanilla JS eventów wyjaśnia pewne specyficzne zachowania React.

1. Wyjaśnić czym jest SyntheticEvent i dlaczego React go używa
2. Opisać obsługę typowych zdarzeń: onClick, onChange, onSubmit, onKeyDown
3. Omówić event delegation — jeden listener zamiast wielu
4. Pokazać różnice od vanilla JS event handling

1. SyntheticEvent — wrapper przeglądarki, cross-browser kompatybilność
2. Event delegation — jeden listener na root, nie na każdym elemencie
3. Nazewnictwo eventów — camelCase: onClick, onChange, onSubmit
4. event.preventDefault — formularz, link
5. event.stopPropagation — blokowanie bubblingu

• Struktura minimalna

1. Wstęp — zdarzenia w przeglądarkach
2. Rozdział 1: SyntheticEvent i event delegation
3. Rozdział 2: Typy zdarzeń w React — onClick, onChange, onSubmit
4. Rozdział 3: Event propagation — bubbling, preventDefault, stopPropagation
5. Podsumowanie
6. Bibliografia

Zdarzenia łączą użytkownika z aplikacją!

Pokaż diagram: user klika → przeglądarka tworzy Event → React Event Delegation przechwytuje → SyntheticEvent → handler React. Wizualizacja przepływu jest kluczowa.