Zdarzenia — JavaScript

Zdarzenia obsługują kliknięcia, wpisywanie tekstu i inne akcje.

Jak to działa?

Metoda addEventListener() przypina funkcję do wybranego zdarzenia. Dzięki niej możesz reagować bez pisania JS w atrybucie HTML.

Przykład 1 — poznaj zapis

// HTML: <button id="save">Zapisz</button>
const button = document.querySelector("#save");

button?.addEventListener("click", () => {
  console.log("Kliknięto!");
});

Kliknięcie przycisku wyświetli komunikat w konsoli.

Przeczytaj kod linijka po linijce

const button = document.querySelector("#save");Tworzymy lub aktualizujemy zmienną, pole albo przypisanie.
console.log("Kliknięto!");Wyświetlamy wartość, aby sprawdzić efekt działania programu.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Po kliknięciu przycisku w konsoli: Kliknięto!

Przykład 2 — podobny problem, inne dane

Teraz przyjrzyj się drugiemu przykładowi. Zwróć uwagę na to, co zmieniło się w kodzie, a co w wyniku. Spróbuj przewidzieć rezultat przed przeczytaniem odpowiedzi.

// HTML: <button id="btn">Licz</button>
let clicks = 0;
document.querySelector("#btn").addEventListener("click", () => console.log(++clicks));

Wynik drugiego przykładupo uruchomieniu przykładu

Po pierwszym kliknięciu: 1, po drugim: 2.

Sprawdź, czy rozumiesz

Wróć do pierwszego przykładu, zmień jedną wartość i spróbuj samodzielnie przewidzieć wynik. Następnie uruchom kod i porównaj rezultat. W ten sposób nauczysz się nie tylko przepisywać instrukcje, ale rozumieć ich działanie.

Spróbuj samodzielnie

Dodaj licznik kliknięć zwiększany po naciśnięciu przycisku.