Zdarzenia w JavaScript - teoria
- Praktyczne zadania
- Teoria
- Pomoce do ćwiczeń
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:
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:
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:
<!DOCTYPE html>
<html lang=”pl”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Wyświetlanie tekstu na żywo</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
#pole {
padding: 5px;
font-size: 16px;
width: 250px;
}
#wynik {
margin-top: 15px;
font-size: 18px;
color: blue;
}
</style>
</head>
<body>
<h2>Wpisz coś:</h2>
<input type=”text” id=”pole” placeholder=”Wpisz coś…”>
<p id=”wynik”></p>
<script>
const pole = document.querySelector(„#pole”);
const wynik = document.querySelector(„#wynik”);
pole.addEventListener(„input”, function () {
wynik.textContent = pole.value;
});
</script>
</body>
</html>
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:
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:
