Obsługa zdarzeń w JavaScript
1. Wprowadzenie
Zdarzenia (ang. events) to akcje zachodzące w przeglądarce, na które JavaScript może reagować: * Kliknięcie myszą * Naciśnięcie klawisza * Załadowanie strony * Zmiana rozmiaru okna * Przesłanie formularza
JavaScript pozwala nasłuchiwać na zdarzenia i wykonywać kod w odpowiedzi.
2. Rodzaje zdarzeń
2.1 Zdarzenia myszy:
| Zdarzenie | Opis |
|---|---|
click |
Kliknięcie elementu |
dblclick |
Podwójne kliknięcie |
mousedown |
Naciśnięcie przycisku myszy |
mouseup |
Zwolnienie przycisku myszy |
mousemove |
Ruch myszy nad elementem |
mouseenter |
Najechanie myszą na element |
mouseleave |
Opuszczenie elementu przez mysz |
mouseover |
Najechanie (w tym na dzieci) |
mouseout |
Opuszczenie (w tym dzieci) |
2.2 Zdarzenia klawiatury:
| Zdarzenie | Opis |
|---|---|
keydown |
Naciśnięcie klawisza |
keyup |
Zwolnienie klawisza |
keypress |
Naciśnięcie klawisza (przestarzałe) |
2.3 Zdarzenia formularzy:
| Zdarzenie | Opis |
|---|---|
submit |
Przesłanie formularza |
input |
Zmiana wartości pola |
change |
Zmiana wartości i utrata focus |
focus |
Uzyskanie focus |
blur |
Utrata focus |
2.4 Zdarzenia okna:
| Zdarzenie | Opis |
|---|---|
load |
Załadowanie całej strony |
DOMContentLoaded |
Załadowanie DOM (przed obrazkami) |
resize |
Zmiana rozmiaru okna |
scroll |
Przewinięcie strony |
3. Dodawanie obsługi zdarzeń
3.1 addEventListener() (ZALECANE)
Nowoczesny i elastyczny sposób.
Przykład:
Zalety: * Można dodać wiele funkcji do jednego zdarzenia * Łatwe usuwanie nasłuchiwania * Kontrola nad propagacją zdarzeń
3.2 Właściwości on... (NIE ZALECANE)
Wady: * Tylko jedna funkcja na zdarzenie (nadpisywanie) * Trudniejsze zarządzanie
3.3 Atrybuty HTML (UNIKAJ)
Wady: * Miesza HTML z JavaScript * Trudne w utrzymaniu
4. Usuwanie obsługi zdarzeń
Uwaga: Funkcja musi być nazwana (nie może być anonimowa), aby móc ją usunąć.
5. Obiekt zdarzenia (Event Object)
Funkcja obsługująca zdarzenie otrzymuje obiekt zdarzenia jako parametr.
Właściwości obiektu zdarzenia:
| Właściwość | Opis |
|---|---|
event.type |
Typ zdarzenia (np. "click") |
event.target |
Element, na którym nastąpiło zdarzenie |
event.currentTarget |
Element, do którego przypisano nasłuchiwanie |
event.clientX |
Pozycja X myszy względem okna |
event.clientY |
Pozycja Y myszy względem okna |
event.key |
Naciśnięty klawisz (dla klawiatury) |
event.preventDefault() |
Anuluje domyślną akcję |
event.stopPropagation() |
Zatrzymuje propagację zdarzenia |
Przykład:
6. Propagacja zdarzeń
Zdarzenia w DOM propagują się (przepływają) przez drzewo elementów.
6.1 Event Bubbling (bąbelkowanie)
Zdarzenie rozpoczyna się na elemencie docelowym i propaguje w górę do rodziców.
Wynik po kliknięciu przycisku:
Child kliknięty
Parent kliknięty
6.2 Zatrzymanie propagacji
Teraz tylko "Child kliknięty" zostanie wyświetlone.
7. Anulowanie domyślnych akcji
Niektóre elementy mają domyślne zachowania:
* Link (<a>) – przekierowanie
* Formularz (<form>) – przesłanie danych
* Prawy przycisk myszy – menu kontekstowe
Możemy je anulować za pomocą preventDefault().
Przykład – formularz:
8. Delegacja zdarzeń
Zamiast dodawać nasłuchiwanie do wielu elementów, dodajemy je do rodzica i sprawdzamy event.target.
Przykład – lista elementów:
Zalety: * Lepsza wydajność (jedno nasłuchiwanie zamiast wielu) * Działa też dla dynamicznie dodanych elementów
9. Przykłady praktyczne
Przełączanie klasy:
Obsługa klawiatury:
Walidacja formularza:
10. Dobre praktyki
- Używaj
addEventListener()zamiast atrybutów HTML - Nazwuj funkcje obsługujące zdarzenia, jeśli planujesz je usuwać
- Stosuj delegację zdarzeń dla wielu podobnych elementów
- Używaj
preventDefault()świadomie – nie anuluj domyślnych akcji bez powodu - Debounce i throttle dla zdarzeń wywoływanych często (
scroll,resize,input)
11. Podsumowanie
| Kategoria | Przykłady |
|---|---|
| Zdarzenia myszy | click, dblclick, mousemove |
| Zdarzenia klawiatury | keydown, keyup |
| Zdarzenia formularza | submit, input, change |
| Zdarzenia okna | load, resize, scroll |
| Metody | addEventListener(), removeEventListener() |
| Obiekt zdarzenia | event.target, event.preventDefault() |
12. Wnioski
- Zdarzenia pozwalają na interaktywność aplikacji webowych
addEventListener()to nowoczesny i elastyczny sposób obsługi zdarzeń- Propagacja zdarzeń i delegacja to kluczowe koncepcje
- Znajomość obsługi zdarzeń jest niezbędna dla każdego front-end developera
Podsumowanie praktyczne:
Opanuj addEventListener(), propagację zdarzeń i delegację – to podstawa tworzenia interaktywnych aplikacji webowych.