Rozgrzewka: zdarzenia z poprzedniej lekcji

1. Dlaczego addEventListener jest zalecany zamiast atrybutu onclick w HTML?
2. Jakie dwa argumenty przyjmuje metoda addEventListener?
3. Co wskazuje event.target wewnątrz funkcji obsługi zdarzenia?

Nie tylko click: inne rodzaje zdarzeń

Na poprzedniej lekcji nasłuchiwaliście zdarzenia click - kliknięcia myszką. Przeglądarka wystrzeliwuje też inne zdarzenia: naciśnięcie klawisza, wysłanie formularza, koniec wczytywania strony. Każde nasłuchujecie tą samą metodą addEventListener, tylko z inną nazwą zdarzenia jako pierwszym argumentem.

submit: zdarzenie wysłania formularza

Gdy wypełnicie formularz i klikniecie przycisk „Wyślij” (albo wciśniecie Enter w polu), przeglądarka domyślnie wysyła dane na serwer i przeładowuje stronę. Zdarzenie submit wystrzeliwuje dokładnie w tym momencie - zanim to się stanie, więc możecie jeszcze zareagować.

const form = document.getElementById("signup");

form.addEventListener("submit", handleSubmit);

event.preventDefault(): zatrzymaj domyślne działanie przeglądarki

Obiekt zdarzenia event (poprzednia lekcja) ma metodę preventDefault(). Wywołana wewnątrz funkcji obsługi zatrzymuje to, co przeglądarka zrobiłaby domyślnie - tu: wysłanie formularza i przeładowanie strony. Reszta funkcji (np. komunikat o błędzie) wykonuje się dalej.

function handleSubmit(event) {
  if (nameField.value === "") {
    event.preventDefault();
    // formularz nie zostanie wysłany
  }
}

keydown: liczymy naciśnięcia klawiszy

Zdarzenie keydown wystrzeliwuje za każdym razem, gdy naciśniecie klawisz w polu, które ma fokus (jest aktywne). Licznik keyCount rośnie o 1 przy każdym naciśnięciu.

Ciekawostka z MDN: obok keydown istniało kiedyś zdarzenie keypress, uruchamiane tylko przy klawiszach, które wpisują znak - literach, cyfrach, Enterze. Strzałki i Escape go nie odpalały. MDN oznacza dziś keypress jako przestarzałe i każe używać w zamian keydown albo beforeinput.

let keyCount = 0;

function handleKeydown() {
  keyCount = keyCount + 1;
  console.log(keyCount);
}

nameField.addEventListener("keydown", handleKeydown);

Kod: formularz, submit i keydown

page.html:

<form id="signup">
  <input type="text" id="nameField" placeholder="Twoje imię">
  <button type="submit">Wyślij</button>
</form>

script.js:

const form = document.getElementById("signup");
const nameField = document.getElementById("nameField");
let keyCount = 0;

function handleSubmit(event) {
  if (nameField.value === "") {
    event.preventDefault();
  }
}

function handleKeydown() {
  keyCount = keyCount + 1;
}

form.addEventListener("submit", handleSubmit);
nameField.addEventListener("keydown", handleKeydown);

Tak pytają na egzaminie

Ćwiczenie: formularz, który nie wyśle pustego pola

1. Otwórz page.html z poprzednich lekcji. Dodaj formularz: <form id="signup"><input type="text" id="nameField"><button type="submit">Wyślij</button></form>.
2. W script.js pobierz formularz i pole: const form = document.getElementById("signup"); i const nameField = document.getElementById("nameField");
3. Napisz funkcję handleSubmit(event) - jeśli nameField.value === "", wywołaj event.preventDefault().
4. Podepnij nasłuch: form.addEventListener("submit", handleSubmit);
5. Sprawdź w przeglądarce: kliknij Wyślij z pustym polem (strona nie powinna się przeładować), potem wpisz imię i kliknij Wyślij ponownie (przeładowanie następuje).
6. Dla chętnych: zapisz zmiany w swoim repozytorium - commit „Dodaje walidację formularza przy submit”.

A jak to wygląda w produkcji?