Zdarzenia

Witaj z powrotem.

W poprzedniej lekcji poznałeś DOM.

DOM pozwala JavaScript odczytywać i zmieniać stronę internetową.

Bardzo przydatne.

Bardzo widoczne.

Bardzo w stylu: “patrz, strona się rusza!”

Ale teraz potrzebujemy czegoś jeszcze ważniejszego.

Interakcji.

Strona nie powinna tylko siedzieć jak bardzo drogi plakat.

Powinna reagować.

Kiedy użytkownik klika przycisk, coś powinno się stać.

Kiedy użytkownik wpisuje tekst, coś powinno się stać.

Kiedy użytkownik wysyła formularz, coś powinno się stać.

I tutaj pojawiają się zdarzenia.

Zdarzenia to sposób, w jaki JavaScript reaguje na użytkowników.

Przeglądarka mówi:

Coś się stało.

JavaScript odpowiada:

Mam na to funkcję.

I zaczyna się frontend development.

Z pewnością siebie.

I okazjonalnym krzykiem.

Czego Się Nauczysz

W tej lekcji nauczysz się:

czym są zdarzenia;
jak działają event listenery;
jak używać addEventListener;
jak reagować na kliknięcia;
jak reagować na pisanie;
jak używać obiektu event;
jak obsługiwać wysyłanie formularzy;
jak używać preventDefault;
jak pracować ze zdarzeniami klawiatury;
jak zbudować mały interaktywny formularz opinii.

Na końcu tej lekcji twoje strony będą reagować na działania użytkownika.

Przyciski będą odpowiadać.

Inputy będą aktualizować tekst.

Formularze przestaną zachowywać się jak dzikie zwierzęta.

Przeważnie.

Czym Jest Zdarzenie?

Zdarzenie to coś, co dzieje się w przeglądarce.

Przykłady:

użytkownik klika przycisk;
użytkownik pisze w polu input;
użytkownik wysyła formularz;
użytkownik rusza myszką;
użytkownik naciska klawisz;
strona kończy się ładować.

Zdarzenia dzieją się cały czas.

Przeglądarka jest w zasadzie bardzo zajętą recepcjonistką, która mówi:

Kliknięcie.
Klawisz naciśnięty.
Input zmieniony.
Formularz wysłany.
Mysz poruszona.
Kolejne kliknięcie.
Pomocy.

JavaScript może nasłuchiwać tych zdarzeń.

Potem może uruchomić funkcję.

Ta funkcja decyduje, co ma się stać dalej.

Utwórz Projekt

Utwórz folder dla tej lekcji:

mkdir javascript-lesson8
cd javascript-lesson8
touch index.html
touch script.js

Twój projekt powinien wyglądać tak:

javascript-lesson8/
  index.html
  script.js

Otwórz folder w edytorze.

Dzisiaj budujemy interaktywne strony.

Przeglądarka nie będzie już tylko pokazywać treści.

Przygotowuje się do słuchania.

Jak bardzo teatralny pracownik obsługi klienta.

Napisz HTML

Otwórz index.html i dodaj:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Zdarzenia</title>
</head>
<body>
  <h1>Zdarzenia</h1>

  <button id="helloButton">Powiedz Cześć</button>

  <p id="message">Kliknij przycisk.</p>

  <script src="script.js"></script>
</body>
</html>

Teraz otwórz script.js.

Mamy:

przycisk;
akapit;
JavaScript gotowy do reakcji.

Bardzo proste.

Bardzo potężne.

Jak mały śrubokręt, który może przypadkiem naprawić internet.

Twój Pierwszy Event Listener

Aby zareagować na zdarzenie, używamy addEventListener.

Dodaj to do script.js:

const helloButton = document.getElementById("helloButton");
const messageElement = document.getElementById("message");

function sayHello() {
  messageElement.textContent = "Cześć z JavaScript!";
}

helloButton.addEventListener("click", sayHello);

Odśwież przeglądarkę.

Kliknij przycisk.

Wiadomość się zmieni.

Gratulacje.

Twoja strona zareagowała na działanie użytkownika.

To ważny moment.

Strona nie jest już plakatem.

Teraz jest lekko inteligentnym plakatem.

Jak Działa addEventListener

Spójrz na tę linię:

helloButton.addEventListener("click", sayHello);

Oznacza ona:

Kiedy przycisk zostanie kliknięty, uruchom funkcję sayHello.

Są tutaj dwie ważne części:

"click"

To typ zdarzenia.

sayHello

To funkcja, która ma się uruchomić.

Ważne:

Piszemy:

sayHello

a nie:

sayHello()

Dlaczego?

Bo nie chcemy uruchomić funkcji od razu.

Chcemy przekazać funkcję JavaScriptowi i powiedzieć:

Uruchom to później, kiedy wydarzy się kliknięcie.

Jeśli napiszesz tak:

helloButton.addEventListener("click", sayHello());

funkcja uruchomi się natychmiast.

To klasyczna pułapka dla początkujących.

Czeka za drzwiami ze skórką od banana.

Zdarzenia Click

Zdarzenie click jest jednym z najczęstszych zdarzeń.

Przykład:

const button = document.getElementById("helloButton");

button.addEventListener("click", function () {
  console.log("Przycisk kliknięty!");
});

Tutaj używamy funkcji anonimowej.

Anonimowa oznacza, że funkcja nie ma nazwy.

Jest tworzona bezpośrednio wewnątrz addEventListener.

To jest w porządku przy małych akcjach.

Ale przy większej logice funkcje nazwane są zwykle czytelniejsze:

function handleClick() {
  console.log("Przycisk kliknięty!");
}

button.addEventListener("click", handleClick);

Obie wersje działają.

Używaj tej, która utrzymuje kod czytelny.

Czytelny kod to prezent dla twojego przyszłego ja.

A twoje przyszłe ja już jest zmęczone.

Obiekt Event

Kiedy zdarzenie się wydarzy, JavaScript może dać nam informacje o tym zdarzeniu.

Te informacje znajdują się w obiekcie event.

Przykład:

helloButton.addEventListener("click", function (event) {
  console.log(event);
});

Kliknij przycisk i sprawdź konsolę.

Zobaczysz dużo informacji.

Dużo.

Może nawet za dużo.

Przeglądarka mówi:

Chciałeś szczegóły zdarzenia?
Proszę, oto walizka.

Obiekt event może powiedzieć nam między innymi:

który element został kliknięty;
który klawisz został naciśnięty;
jaka wartość się zmieniła;
czy formularz został wysłany.

Bardzo przydatne.

Bardzo szczegółowe.

Lekko przytłaczające.

event.target

Jedną z bardzo przydatnych właściwości jest event.target.

Mówi nam, który element wywołał zdarzenie.

Przykład:

helloButton.addEventListener("click", function (event) {
  console.log(event.target);
});

Kiedy klikniesz przycisk, konsola pokaże element button.

event.target oznacza:

Element, który uruchomił zdarzenie.

To jest przydatne, kiedy jedna funkcja obsługuje wiele elementów.

Wiele przycisków.

Wiele kart.

Wiele małych źródeł chaosu.

Zdarzenia Input

Zdarzenia nie są tylko dla przycisków.

Działają też z inputami.

Zaktualizuj index.html:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Zdarzenia</title>
</head>
<body>
  <h1>Zdarzenia</h1>

  <label for="nameInput">Twoje imię:</label>
  <input id="nameInput" type="text" placeholder="Wpisz swoje imię">

  <p id="preview">Twoje imię pojawi się tutaj.</p>

  <script src="script.js"></script>
</body>
</html>

Teraz zaktualizuj script.js:

const nameInput = document.getElementById("nameInput");
const previewElement = document.getElementById("preview");

function updatePreview(event) {
  previewElement.textContent = `Cześć, ${event.target.value}!`;
}

nameInput.addEventListener("input", updatePreview);

Odśwież przeglądarkę.

Wpisz swoje imię.

Akapit aktualizuje się podczas pisania.

To jest zdarzenie input.

Uruchamia się za każdym razem, gdy wartość inputa się zmienia.

Bardzo przydatne do:

podglądu na żywo;
pól wyszukiwania;
komunikatów walidacji;
formularzy;
małych momentów frontendowej magii.

Odczytywanie Wartości Inputa

Wartość inputa jest przechowywana w .value.

Przykład:

const nameInput = document.getElementById("nameInput");

console.log(nameInput.value);

W funkcji zdarzenia możesz użyć:

event.target.value

Przykład:

function updatePreview(event) {
  const name = event.target.value;
  previewElement.textContent = `Cześć, ${name}!`;
}

To jest bardzo częste.

Użytkownik pisze.

JavaScript odczytuje wartość.

Strona się aktualizuje.

Prosto.

Czysto.

Jak zmywanie naczyń od razu zamiast tworzenia katastrofy w kuchni.

Rzadkie.

Ale piękne.

Zdarzenia Klawiatury

JavaScript może też reagować na klawiaturę.

Przykład:

document.addEventListener("keydown", function (event) {
  console.log(`Nacisnąłeś: ${event.key}`);
});

Odśwież przeglądarkę.

Naciskaj klawisze.

Konsola pokaże, który klawisz został naciśnięty.

Przykłady:

Nacisnąłeś: a
Nacisnąłeś: Enter
Nacisnąłeś: Escape

Zdarzenia klawiatury są przydatne do:

skrótów;
gier;
zachowania wyszukiwarki;
zamykania modali klawiszem Escape;
interfejsów przyjaznych klawiaturze.

Nie nadużywaj skrótów klawiaturowych.

Nikt nie chce strony, na której naciśnięcie K przypadkiem kupuje lodówkę.

Zdarzenia Submit Formularzy

Formularze mają specjalne zdarzenie o nazwie submit.

Zaktualizuj index.html:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Zdarzenia</title>
</head>
<body>
  <h1>Zdarzenia</h1>

  <form id="contactForm">
    <label for="emailInput">Email:</label>
    <input id="emailInput" type="email" placeholder="ty@example.com">

    <button type="submit">Wyślij</button>
  </form>

  <p id="formMessage">Wyślij formularz.</p>

  <script src="script.js"></script>
</body>
</html>

Teraz zaktualizuj script.js:

const contactForm = document.getElementById("contactForm");
const emailInput = document.getElementById("emailInput");
const formMessage = document.getElementById("formMessage");

function handleSubmit(event) {
  event.preventDefault();

  formMessage.textContent = `Dziękujemy! Otrzymaliśmy: ${emailInput.value}`;
}

contactForm.addEventListener("submit", handleSubmit);

Odśwież przeglądarkę.

Wpisz email.

Wyślij formularz.

Strona się nie przeładowuje.

Wiadomość się zmienia.

Bardzo ładnie.

Bardzo frontendowo.

Bardzo “teraz kontrolujemy chaos.”

Dlaczego preventDefault Jest Ważne

Domyślnie, kiedy formularz zostaje wysłany, przeglądarka przeładowuje stronę.

To normalne zachowanie przeglądarki.

Ale w projektach JavaScript często chcemy obsługiwać formularz samodzielnie.

Dlatego używamy:

event.preventDefault();

To oznacza:

Zatrzymaj domyślne zachowanie przeglądarki.
Ja obsłużę to w JavaScript.

Bez tego strona się przeładuje.

Wiadomość zniknie.

Dusza opuści ciało.

Potem przypomnisz sobie preventDefault.

Klasyka.

Wiele Event Listenerów

Jeden element może mieć wiele event listenerów.

Przykład:

const button = document.getElementById("helloButton");

button.addEventListener("click", function () {
  console.log("Pierwszy listener");
});

button.addEventListener("click", function () {
  console.log("Drugi listener");
});

Kiedy przycisk zostanie kliknięty, obie funkcje się uruchomią.

To może być przydatne.

Ale uważaj.

Zbyt wiele listenerów może sprawić, że kod będzie trudny do śledzenia.

Twój przycisk nie powinien mieć emocjonalnej złożoności powieści detektywistycznej.

Trzymaj wszystko w porządku.

Zbuduj Interaktywny Formularz Opinii

Teraz zbudujemy mały formularz opinii.

Zaktualizuj index.html:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Zdarzenia</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 700px;
      margin: 60px auto;
      padding: 0 24px;
      background-color: #f3f4f6;
      color: #111827;
    }

    .card {
      background-color: white;
      padding: 24px;
      border: 2px solid #e5e7eb;
      border-radius: 18px;
    }

    h1 {
      font-size: 42px;
    }

    label {
      display: block;
      margin-top: 16px;
      font-weight: 700;
    }

    input,
    textarea {
      width: 100%;
      margin-top: 8px;
      padding: 12px;
      border: 2px solid #d1d5db;
      border-radius: 12px;
      font-size: 18px;
      box-sizing: border-box;
    }

    textarea {
      min-height: 120px;
    }

    button {
      margin-top: 18px;
      background-color: #2563eb;
      color: white;
      border: none;
      padding: 14px 20px;
      border-radius: 999px;
      font-weight: 700;
      cursor: pointer;
    }

    button:hover {
      background-color: #1d4ed8;
    }

    .message {
      margin-top: 20px;
      padding: 16px;
      border-radius: 14px;
      background-color: #eff6ff;
      border: 2px solid #bfdbfe;
    }

    .error {
      background-color: #fef2f2;
      border-color: #fecaca;
      color: #991b1b;
    }

    .success {
      background-color: #ecfdf5;
      border-color: #bbf7d0;
      color: #166534;
    }
  </style>
</head>
<body>
  <h1>Zdarzenia</h1>

  <div class="card">
    <form id="feedbackForm">
      <label for="nameInput">Imię</label>
      <input id="nameInput" type="text" placeholder="Twoje imię">

      <label for="feedbackInput">Opinia</label>
      <textarea id="feedbackInput" placeholder="Napisz swoją opinię"></textarea>

      <button type="submit">Wyślij Opinię</button>
    </form>

    <p id="message" class="message">Wypełnij formularz i wyślij go.</p>
  </div>

  <script src="script.js"></script>
</body>
</html>

Teraz zaktualizuj script.js:

const feedbackForm = document.getElementById("feedbackForm");
const nameInput = document.getElementById("nameInput");
const feedbackInput = document.getElementById("feedbackInput");
const messageElement = document.getElementById("message");

function showMessage(text, type) {
  messageElement.textContent = text;
  messageElement.className = `message ${type}`;
}

function handleFeedbackSubmit(event) {
  event.preventDefault();

  const name = nameInput.value;
  const feedback = feedbackInput.value;

  if (name === "" || feedback === "") {
    showMessage("Wypełnij wszystkie pola.", "error");
    return;
  }

  showMessage(`Dziękujemy, ${name}! Twoja opinia została otrzymana.`, "success");

  nameInput.value = "";
  feedbackInput.value = "";
}

feedbackForm.addEventListener("submit", handleFeedbackSubmit);

Odśwież przeglądarkę.

Spróbuj wysłać pusty formularz.

Powinieneś zobaczyć błąd.

Wypełnij formularz.

Wyślij ponownie.

Powinieneś zobaczyć wiadomość sukcesu.

Formularz reaguje.

DOM się aktualizuje.

Inputy zostają wyczyszczone.

To bardzo blisko prawdziwego web developmentu.

Nie pełny backend.

Nie baza danych.

Ale zachowanie frontendu jest prawdziwe.

Strona teraz odpowiada jak cywilizowana istota.

Przeważnie.

Jak Działa Ten Kod

To znajduje formularz i inputy:

const feedbackForm = document.getElementById("feedbackForm");
const nameInput = document.getElementById("nameInput");
const feedbackInput = document.getElementById("feedbackInput");
const messageElement = document.getElementById("message");

Ta funkcja pokazuje wiadomość:

function showMessage(text, type) {
  messageElement.textContent = text;
  messageElement.className = `message ${type}`;
}

Ta funkcja obsługuje formularz:

function handleFeedbackSubmit(event) {
  event.preventDefault();

  const name = nameInput.value;
  const feedback = feedbackInput.value;

  if (name === "" || feedback === "") {
    showMessage("Wypełnij wszystkie pola.", "error");
    return;
  }

  showMessage(`Dziękujemy, ${name}! Twoja opinia została otrzymana.`, "success");

  nameInput.value = "";
  feedbackInput.value = "";
}

To łączy formularz z funkcją:

feedbackForm.addEventListener("submit", handleFeedbackSubmit);

Ważny schemat:

Formularz wysłany.

Domyślne zachowanie zatrzymane.

Wartości inputów sprawdzone.

Wiadomość pokazana.

Inputy wyczyszczone.

Ten schemat pojawia się wszędzie.

Formularze kontaktowe.

Logowanie.

Wyszukiwarki.

Checkout.

Internet to w zasadzie formularze w różnych ubraniach.

Typowe Błędy

Wywołanie Funkcji Natychmiast

Źle:

button.addEventListener("click", handleClick());

Poprawnie:

button.addEventListener("click", handleClick);

Bez nawiasów przekazujesz funkcję.

Z nawiasami wywołujesz ją natychmiast.

Ten błąd jest bardzo częsty.

Bardzo podstępny.

Bardzo JavaScript.

Zapomnienie preventDefault w Formularzach

Źle:

function handleSubmit(event) {
  messageElement.textContent = "Formularz wysłany!";
}

Poprawnie:

function handleSubmit(event) {
  event.preventDefault();
  messageElement.textContent = "Formularz wysłany!";
}

Bez preventDefault strona może się przeładować.

Wtedy zmiany znikają.

Potem patrzysz na ekran.

Potem sobie przypominasz.

Wybranie Złego Elementu

Jeśli to zwraca null:

const button = document.getElementById("sendButton");

Sprawdź swój HTML.

Może id jest inne.

Przykład:

<button id="submitButton">Wyślij</button>

Wtedy JavaScript musi używać:

const button = document.getElementById("submitButton");

Id musi pasować dokładnie.

JavaScript nie jest detektywem.

Nie zgadnie.

Zapomnienie o .value

Źle:

const name = nameInput;

Poprawnie:

const name = nameInput.value;

Element input to nie to samo co wartość w środku.

Element to pudełko.

.value to to, co użytkownik wpisał do pudełka.

Bardzo ważne.

Pudełko.

Zawartość.

Różne rzeczy.

Jak pudełko po pizzy i pizza.

Nie jedz pudełka.

Praktyka

Stwórz stronę z:

inputem;
przyciskiem;
akapitem.

Kiedy użytkownik wpisze coś i kliknie przycisk:

odczytaj wartość inputa;
pokaż ją w akapicie;
wyczyść input.

Przykład:

const input = document.getElementById("textInput");
const button = document.getElementById("showButton");
const output = document.getElementById("output");

function showText() {
  output.textContent = input.value;
  input.value = "";
}

button.addEventListener("click", showText);

Potem dodaj warunek.

Jeśli input jest pusty, pokaż:

Wpisz coś.

Uruchom.

Zmień.

Zepsuj.

Napraw.

Zdarzenia stają się normalne dopiero po praktyce.

Nie po myśleniu o praktyce.

Sprawdziłem.

Mini Wyzwanie

Zbuduj mały formularz logowania.

Strona powinna mieć:

input email;
input password;
przycisk submit;
miejsce na wiadomość.

Zasady:

jeśli email jest pusty, pokaż błąd;
jeśli hasło jest puste, pokaż błąd;
jeśli hasło ma mniej niż 6 znaków, pokaż błąd;
w przeciwnym razie pokaż wiadomość sukcesu.

Przykładowa wiadomość sukcesu:

Dane logowania wyglądają poprawnie.

Nie buduj jeszcze prawdziwego systemu logowania.

To tylko walidacja frontendowa.

Bez bazy danych.

Bez backendu.

Bez tajnego bunkra hakerskiego.

Tylko zdarzenia, inputy i warunki.

Nadal przydatne.

Nadal ważne.

Podsumowanie

Dzisiaj nauczyłeś się:

zdarzenia to rzeczy, które dzieją się w przeglądarce;
JavaScript może nasłuchiwać zdarzeń;
addEventListener łączy zdarzenie z funkcją;
zdarzenia click reagują na kliknięcia przycisków;
zdarzenia input reagują na pisanie;
obiekt event zawiera informacje o zdarzeniu;
event.target pokazuje element, który wywołał zdarzenie;
zdarzenia klawiatury mogą wykrywać naciśnięte klawisze;
zdarzenia submit obsługują formularze;
preventDefault zatrzymuje domyślne zachowanie przeglądarki;
wartości inputów odczytujemy przez .value;
zdarzenia i DOM razem tworzą interakcję.

To ogromny krok.

DOM pozwala JavaScript zmieniać stronę.

Zdarzenia mówią JavaScriptowi, kiedy zmieniać stronę.

Razem tworzą prawdziwą interakcję.

Przyciski odpowiadają.

Formularze reagują.

Wiadomości się aktualizują.

Użytkownicy klikają różne rzeczy.

JavaScript próbuje za tym nadążyć.

Heroicznie.

Lekko zestresowany.

Ale heroicznie.

Następna Lekcja

W następnej lekcji bardziej szczegółowo poznamy formularze i walidację.

Formularze są wszędzie w internecie.

Formularze kontaktowe.

Logowanie.

Pola wyszukiwania.

Checkout.

Zapisy do newslettera.

Małe pudełka, w których użytkownicy wpisują swoje przeznaczenie.

JavaScript pomoże nam sprawdzić te dane, zanim wyślemy je gdziekolwiek.