Czym są zdarzenia?

W kontekście stron WWW zdarzenia to różne akcje lub sytuacje, które mogą mieć miejsce podczas działania strony. Przykłady: kliknięcie myszą, najechanie kursorem na element, naciśnięcie klawisza, zmiana rozmiaru okna, załadowanie strony itp. JavaScript pozwala nam reagować na zdarzenia — tzn. uruchomić określony kod, gdy dane zdarzenie wystąpi.

Nasłuchiwanie zdarzeń

Aby kod wykonał się w momencie zdarzenia, musimy zarejestrować tzw. handler (obsługę) zdarzenia. Robi się to poprzez przypięcie funkcji do konkretnego rodzaju zdarzenia na wybranym elemencie. Najpopularniejsza metoda to addEventListener.

Składnia:

element.addEventListener("nazwaZdarzenia", funkcjaDoWykonania);

Najpierw musimy jednak mieć dostęp do obiektu elementu (węzła DOM), którego zdarzenie dotyczy (np. przycisk, obrazek, cały document). Załóżmy, że mamy element przycisku przypisany do zmiennej btn:

btn.addEventListener("click", function() {
    console.log("Kliknięto przycisk!");
});

Ten kod ustawia nasłuchiwanie na zdarzenie "click" (kliknięcie) na elemencie btn. Kiedy użytkownik kliknie ten element, wywołana zostanie podana funkcja (tutaj wypisujemy komunikat w konsoli). Podobnie można reagować na inne zdarzenia, np. "mouseover" (najechanie kursorem) lub "keydown" (naciśnięcie klawisza).

Istnieją też inne sposoby przypisania obsługi zdarzeń, np.:

• przypisanie do właściwości obiektu: btn.onclick = function() { ... }
• dodanie atrybutu HTML: onclick="jakasFunkcja()"

Jednak korzystanie z addEventListener jest obecnie uznawane za najlepszą praktykę — umożliwia np. podpięcie wielu funkcji do tego samego zdarzenia oraz łatwe usunięcie nasłuchu za pomocą removeEventListener.

Przykłady

Przykład 1: Zmiana tekstu po kliknięciu

Załóżmy, że w HTML mamy element paragrafu i przycisk. Przykładowy HTML i skrypt:

<p id="opis">Kliknij przycisk, aby zmienić ten tekst.</p>
<button id="zmienBtn">Zmień tekst</button>

<script>
let opisParagraf = document.getElementById("opis");
let przycisk = document.getElementById("zmienBtn");
przycisk.addEventListener("click", function() {
    opisParagraf.textContent = "Tekst został zmieniony po kliknięciu!";
});
</script>

Po wykonaniu tego kodu każde kliknięcie w przycisk spowoduje zmianę zawartości paragrafu o id "opis".

Przykład 2: Licznik kliknięć

Przykład z użyciem zmiennej jako licznika:

<button id="licznikBtn">Kliknij mnie</button>

<script>
let count = 0;
let btn = document.getElementById("licznikBtn");
btn.addEventListener("click", function() {
    count++;
    console.log("Przycisk kliknięto " + count + " razy.");
});
</script>

Każdorazowe kliknięcie zwiększa zmienną count o 1 i wypisuje aktualny stan w konsoli. Można też wyświetlać tę wartość na stronie (np. w elemencie <span>).

Inne zdarzenia (klawiatura i mysz)

Możemy nasłuchiwać zdarzeń globalnych, np. na obiekcie document:

document.addEventListener("keydown", function(event) {
    console.log("Naciśnięto klawisz: " + event.key);
});

Właściwość event.key zawiera znak lub nazwę klawisza, który został wciśnięty — to pozwala np. wykrywać skróty klawiszowe.

Ćwiczenia

1. Utwórz prosty przycisk HTML (element <button> z jakimś tekstem). W skrypcie złap ten element (np. przez document.getElementById) i ustaw mu obsługę zdarzenia "click", tak by po kliknięciu wykonywała się jakaś akcja (np. wypisanie czegoś w konsoli lub pokazanie alert).
2. Zaimplementuj przykład zmiany tekstu po kliknięciu: dodaj do HTML element tekstowy (np. <p id="tekst">Jakiś tekst</p>) i przycisk. Napisz skrypt, który po kliknięciu przycisku zmieni zawartość paragrafu (użyj textContent lub innerHTML).
3. Zaimplementuj licznik kliknięć: dodaj przycisk, który po każdym kliknięciu będzie aktualizować zmienną licznika i wyświetlać obecną wartość licznika w konsoli lub na stronie.
4. (Dla chętnych) Dodaj nasłuchiwanie na zdarzenie keydown dla całego dokumentu. W funkcji obsługującej pobierz właściwość event.key i wypisz ją. Otwórz stronę i wciśnij kilka klawiszy, obserwując konsolę. (Jeśli używasz console.log, pamiętaj, żeby mieć otwartą konsolę deweloperską.)