Obsługa zdarzeń — myszy i klawiatury

Po co się tego uczymy?

To moment, w którym JavaScript przestaje być kodem wykonywanym raz przy wczytaniu strony, a zaczyna REAGOWAĆ na to, co robi użytkownik — bez tego nie da się zbudować żadnego interaktywnego przycisku, formularza czy koszyka.

Teoria

Zdarzenie (event) to informacja, że coś się wydarzyło na stronie — kliknięcie, najechanie myszką, wciśnięcie klawisza, wysłanie formularza. JavaScript pozwala "nasłuchiwać" takich zdarzeń i reagować na nie własnym kodem.

Nowoczesny, zalecany sposób podpięcia obsługi zdarzenia to metoda addEventListener():
element.addEventListener("nazwaZdarzenia", funkcja);

Najczęstsze zdarzenia:
click — kliknięcie myszą.
mouseover / mouseout — najechanie / zjechanie myszą.
keydown / keyup — wciśnięcie / puszczenie klawisza.
submit — wysłanie formularza (kluczowe dla Lekcji 8).
input — zmiana wartości pola tekstowego w czasie rzeczywistym.

Funkcja obsługująca zdarzenie otrzymuje automatycznie obiekt zdarzenia (zwyczajowo nazywany event albo e), który zawiera szczegóły — np. event.key (który klawisz wciśnięto) czy event.target (który element wywołał zdarzenie).

Starszy, mniej zalecany sposób to atrybut bezpośrednio w HTML (<button onclick="funkcja()">) — działa, ale miesza logikę JS ze strukturą HTML, więc unikaj go w większych projektach.

Schemat

Użytkownik klika przycisk
          |
          v
przeglądarka wywołuje funkcję
podpiętą przez addEventListener("click", ...)
          |
          v
funkcja wykonuje swój kod
(np. zmienia treść elementu na stronie)

Przykład z życia

Każdy przycisk "Dodaj do koszyka", który natychmiast (bez przeładowania strony) pokazuje potwierdzenie albo aktualizuje licznik produktów w koszyku, działa dzięki dokładnie takiemu nasłuchiwaniu zdarzenia click.

Kod (JavaScript)

<button id="przyciskWypozycz">Wypożycz film</button>
<p id="komunikat"></p>

<script>
    const przycisk = document.getElementById("przyciskWypozycz");
    const komunikat = document.getElementById("komunikat");

    przycisk.addEventListener("click", function () {
        komunikat.textContent = "Film dodany do koszyka!";
    });

    // obsługa klawiatury - wykrywanie wciśnięcia klawisza Enter
    document.addEventListener("keydown", function (event) {
        if (event.key === "Enter") {
            console.log("Wciśnięto Enter!");
        }
    });
</script>

Komentarz i wyjaśnienie kodu

document.getElementById("przyciskWypozycz") "wyszukuje" element HTML o podanym id i zwraca go jako obiekt, na którym można wywoływać dalsze metody — to pierwszy krok modelu DOM, dokładniej omówionego w Lekcji 6. Funkcja przekazana do addEventListener nie jest wywoływana od razu — jest "zapamiętywana" i uruchamiana dopiero, gdy faktycznie nastąpi kliknięcie.

Ćwiczenie samodzielne

Podepnij pod przycisk zdarzenie click, które wypisuje komunikat do konsoli.

Zadania do pracy własnej

Zbuduj przycisk, który po kliknięciu zmienia tekst akapitu obok na dowolny komunikat.
Zbuduj pole tekstowe z nasłuchiwaniem zdarzenia input, które na bieżąco wyświetla w osobnym elemencie liczbę wpisanych znaków.
Zbuduj przycisk "Dodaj do koszyka" przy trzech różnych filmach (każdy z osobnym id), gdzie kliknięcie dowolnego przycisku zwiększa wspólny licznik produktów w koszyku wyświetlany na stronie — to bezpośrednie przygotowanie pod prawdziwy koszyk w sesji PHP (Lekcja 17 działu Aplikacje internetowe PHP).

Typowe błędy

Częsty błąd to próba podpięcia addEventListener na elemencie, zanim ten element w ogóle istnieje w dokumencie (np. skrypt umieszczony w <head> przed treścią <body>) — wynikiem jest błąd "Cannot read properties of null". Drugi błąd: wywołanie funkcji od razu przy podpinaniu (addEventListener("click", funkcja()) zamiast addEventListener("click", funkcja)) — nawiasy po nazwie funkcji WYWOŁUJĄ ją natychmiast, zamiast przekazać do wykonania później. Trzeci: podpięcie tego samego nasłuchiwania wielokrotnie (np. w pętli bez odpowiedniego zabezpieczenia), przez co funkcja wykonuje się kilka razy na jedno kliknięcie.

Nawiązanie do egzaminu zawodowego

To dosłowna realizacja efektu INF.03.5.3.2 z podstawy programowej: "stosuje w programowaniu obsługę zdarzeń myszy i klawiatury".