Zdarzenia w JavaScript - teoria

Zdarzenia (ang. events) w JavaScript to mechanizm, który pozwala na reagowanie na działania użytkownika lub zmiany w dokumencie HTML. Dzięki nim możemy sprawić, że strona internetowa staje się interaktywna – np. zmienia się po kliknięciu przycisku, najechaniu myszą na element czy wpisaniu tekstu w formularzu. Zdarzenia łączą się z HTML (struktura strony) i CSS (stylizacja), tworząc dynamiczne efekty.

Jak stosuje się zdarzenia?

Zdarzenia w JavaScript są obsługiwane poprzez:

Dodanie nasłuchiwania zdarzeń – używa się metody addEventListener, która pozwala przypisać funkcję (tzw. event handler) do konkretnego elementu HTML.
Wbudowanie w HTML – mniej zalecane, ale można użyć atrybutów takich jak onclick bezpośrednio w znacznikach HTML (np. <button onclick=”funkcja()”>).
Modyfikacja DOM – JavaScript pozwala zmieniać elementy HTML i ich style CSS w odpowiedzi na zdarzenia.

Podstawowa składnia z addEventListener:

element – wybrany element HTML (np. za pomocą document.querySelector(„selektor”)).
„nazwaZdarzenia” – typ zdarzenia, np. „click”, „mouseover”, „input”.
funkcja – kod, który wykona się, gdy zdarzenie zostanie wyzwolone.

Jak to działa w praktyce?

Wybieramy element HTML, na którym ma się coś wydarzyć (np. przycisk).
Dodajemy nasłuchiwanie zdarzenia (np. kliknięcie).
Definiujemy, co ma się stać – np. zmiana koloru, wyświetlenie tekstu, animacja.

Podstawowe zdarzenia i ich wykorzystanie

Poniżej opisuję kilka popularnych zdarzeń, które można połączyć z HTML i CSS, aby uzyskać ciekawe efekty. Do każdego zdarzenia podaję przykład kodu.

Zdarzenie click
- Opis: Wyzwalane po kliknięciu elementu. Idealne do przycisków, linków itp.
- Przykład: Zmiana koloru tła po kliknięciu przycisku

HTML:

CSS:

JS:

Efekt: Po kliknięciu przycisku tło strony zmienia się na jasnoniebieskie.

2. Zdarzenie mouseover i mouseout

Opis: mouseover wyzwala się, gdy kursor najeżdża na element, a mouseout – gdy go opuszcza. Świetne do efektów hover.
Przykład: Powiększenie obrazka po najechaniu myszą.

HTML:

CSS:

JS:

Efekt: Obrazek płynnie się powiększa po najechaniu myszą i wraca do normy po jej opuszczeniu.

3. Zdarzenie input

Opis: Wyzwalane przy każdej zmianie wartości w polu tekstowym (np. podczas pisania).
Przykład: Wyświetlanie wpisanego tekstu w czasie rzeczywistym.

HTML:

CSS:

JS:

Efekt: Tekst wpisany w pole natychmiast pojawia się poniżej.

4. Zdarzenie keydown

Opis: Wyzwalane po naciśnięciu klawisza na klawiaturze. Przydatne w grach lub interaktywnych formularzach.
Przykład: Zmiana koloru kwadratu po naciśnięciu klawisza „r”.

HTML:

CSS:

JS:

Efekt: Po naciśnięciu „r” kwadrat zmienia kolor na czerwony.

5. Zdarzenie scroll

Opis: Wyzwalane podczas przewijania strony. Świetne do efektów typu „sticky” lub animacji.
Przykład: Zmiana koloru paska nawigacyjnego po przewinięciu

HTML:

CSS: