Події

Вітаю знову.

У попередній лекції ти познайомився з DOM.

DOM дозволяє JavaScript читати й змінювати вебсторінку.

Дуже корисно.

Дуже помітно.

Дуже в стилі: “дивись, сторінка рухається!”

Але тепер нам потрібно щось ще важливіше.

Взаємодія.

Сторінка не має просто сидіти, як дуже дорогий плакат.

Вона має реагувати.

Коли користувач натискає кнопку, щось має статися.

Коли користувач вводить текст, щось має статися.

Коли користувач відправляє форму, щось має статися.

Ось тут зʼявляються події.

Події — це спосіб, у який JavaScript реагує на користувачів.

Браузер каже:

Щось сталося.

JavaScript відповідає:

У мене є функція для цього.

І починається frontend development.

З упевненістю.

І випадковими криками.

Що Ти Вивчиш

У цій лекції ти вивчиш:

що таке події;
як працюють event listeners;
як використовувати addEventListener;
як реагувати на кліки;
як реагувати на введення тексту;
як використовувати обʼєкт event;
як обробляти відправку форм;
як використовувати preventDefault;
як працювати з подіями клавіатури;
як створити маленьку інтерактивну форму відгуку.

Наприкінці цієї лекції твої сторінки будуть реагувати на дії користувача.

Кнопки відповідатимуть.

Input-и оновлюватимуть текст.

Форми перестануть поводитися як дикі тварини.

Переважно.

Що Таке Подія?

Подія — це щось, що відбувається в браузері.

Приклади:

користувач натискає кнопку;
користувач пише в input;
користувач відправляє форму;
користувач рухає мишкою;
користувач натискає клавішу;
сторінка завершує завантаження.

Події відбуваються постійно.

Браузер — це фактично дуже зайнята рецепціоністка, яка каже:

Клік.
Клавішу натиснуто.
Input змінено.
Форму відправлено.
Мишку переміщено.
Ще один клік.
Допоможіть.

JavaScript може слухати ці події.

Потім він може запускати функцію.

А ця функція вирішує, що має статися далі.

Створи Проєкт

Створи папку для цієї лекції:

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

Твій проєкт має виглядати так:

javascript-lesson8/
  index.html
  script.js

Відкрий папку в редакторі.

Сьогодні ми створюємо інтерактивні сторінки.

Браузер більше не просто показує контент.

Він готується слухати.

Як дуже театральний працівник служби підтримки.

Напиши HTML

Відкрий index.html і додай:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Події</title>
</head>
<body>
  <h1>Події</h1>

  <button id="helloButton">Сказати Привіт</button>

  <p id="message">Натисни кнопку.</p>

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

Тепер відкрий script.js.

У нас є:

кнопка;
абзац;
JavaScript, готовий реагувати.

Дуже просто.

Дуже потужно.

Як маленька викрутка, яка випадково може полагодити інтернет.

Твій Перший Event Listener

Щоб реагувати на подію, ми використовуємо addEventListener.

Додай це в script.js:

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

function sayHello() {
  messageElement.textContent = "Привіт від JavaScript!";
}

helloButton.addEventListener("click", sayHello);

Онови браузер.

Натисни кнопку.

Повідомлення зміниться.

Вітаю.

Твоя сторінка зреагувала на дію користувача.

Це важливий момент.

Сторінка більше не плакат.

Тепер це трохи розумний плакат.

Як Працює addEventListener

Подивись на цей рядок:

helloButton.addEventListener("click", sayHello);

Він означає:

Коли кнопку натиснуть, запусти функцію sayHello.

Тут є дві важливі частини:

"click"

Це тип події.

sayHello

Це функція, яка має запуститися.

Важливо:

Ми пишемо:

sayHello

а не:

sayHello()

Чому?

Бо ми не хочемо запускати функцію одразу.

Ми хочемо передати функцію JavaScript і сказати:

Запусти це пізніше, коли станеться клік.

Якщо написати так:

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

функція запуститься одразу.

Це класична пастка для початківців.

Вона чекає за дверима зі шкіркою банана.

Події Click

Подія click — одна з найпоширеніших подій.

Приклад:

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

button.addEventListener("click", function () {
  console.log("Кнопку натиснуто!");
});

Тут ми використовуємо анонімну функцію.

Анонімна означає, що функція не має назви.

Вона створюється прямо всередині addEventListener.

Це нормально для маленьких дій.

Але для більшої логіки іменовані функції зазвичай читабельніші:

function handleClick() {
  console.log("Кнопку натиснуто!");
}

button.addEventListener("click", handleClick);

Обидва варіанти працюють.

Використовуй той, який робить код читабельним.

Читабельний код — це подарунок твоєму майбутньому “я”.

А твоє майбутнє “я” уже втомлене.

Обʼєкт Event

Коли подія відбувається, JavaScript може дати нам інформацію про цю подію.

Ця інформація зберігається в обʼєкті event.

Приклад:

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

Натисни кнопку й подивись у консоль.

Ти побачиш багато інформації.

Багато.

Можливо, навіть забагато.

Браузер каже:

Ти хотів деталі події?
Ось тобі валіза.

Обʼєкт event може сказати нам:

який елемент було натиснуто;
яку клавішу було натиснуто;
яке значення змінилося;
чи була форма відправлена.

Дуже корисно.

Дуже детально.

Трохи перевантажує.

event.target

Одна дуже корисна властивість — event.target.

Вона показує, який елемент викликав подію.

Приклад:

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

Коли ти натиснеш кнопку, консоль покаже елемент button.

event.target означає:

Елемент, який запустив подію.

Це корисно, коли одна функція обробляє багато елементів.

Багато кнопок.

Багато карток.

Багато маленьких джерел хаосу.

Події Input

Події існують не тільки для кнопок.

Вони також працюють з input-ами.

Онови index.html:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Події</title>
</head>
<body>
  <h1>Події</h1>

  <label for="nameInput">Твоє імʼя:</label>
  <input id="nameInput" type="text" placeholder="Введи своє імʼя">

  <p id="preview">Твоє імʼя зʼявиться тут.</p>

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

Тепер онови script.js:

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

function updatePreview(event) {
  previewElement.textContent = `Привіт, ${event.target.value}!`;
}

nameInput.addEventListener("input", updatePreview);

Онови браузер.

Введи своє імʼя.

Абзац оновлюється під час введення.

Це подія input.

Вона запускається щоразу, коли значення input змінюється.

Дуже корисно для:

live preview;
полів пошуку;
повідомлень валідації;
форм;
маленьких моментів frontend-магії.

Отримання Значення Input

Значення input зберігається в .value.

Приклад:

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

console.log(nameInput.value);

У функції події можна використовувати:

event.target.value

Приклад:

function updatePreview(event) {
  const name = event.target.value;
  previewElement.textContent = `Привіт, ${name}!`;
}

Це дуже поширено.

Користувач пише.

JavaScript читає значення.

Сторінка оновлюється.

Просто.

Чисто.

Як помити посуд одразу, а не створити катастрофу на кухні.

Рідко.

Але красиво.

Події Клавіатури

JavaScript також може реагувати на клавіатуру.

Приклад:

document.addEventListener("keydown", function (event) {
  console.log(`Ти натиснув: ${event.key}`);
});

Онови браузер.

Натискай клавіші.

Консоль покаже, яку клавішу було натиснуто.

Приклади:

Ти натиснув: a
Ти натиснув: Enter
Ти натиснув: Escape

Події клавіатури корисні для:

гарячих клавіш;
ігор;
поведінки пошуку;
закриття модальних вікон через Escape;
інтерфейсів, дружніх до клавіатури.

Не зловживай гарячими клавішами.

Ніхто не хоче сайт, де натискання K випадково купує холодильник.

Події Submit у Формах

Форми мають спеціальну подію submit.

Онови index.html:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Події</title>
</head>
<body>
  <h1>Події</h1>

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

    <button type="submit">Відправити</button>
  </form>

  <p id="formMessage">Відправ форму.</p>

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

Тепер онови script.js:

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

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

  formMessage.textContent = `Дякуємо! Ми отримали: ${emailInput.value}`;
}

contactForm.addEventListener("submit", handleSubmit);

Онови браузер.

Введи email.

Відправ форму.

Сторінка не перезавантажується.

Повідомлення змінюється.

Дуже гарно.

Дуже frontend.

Дуже “тепер ми контролюємо хаос”.

Чому preventDefault Важливий

За замовчуванням, коли форма відправляється, браузер перезавантажує сторінку.

Це нормальна поведінка браузера.

Але в JavaScript-проєктах ми часто хочемо обробляти форму самостійно.

Тому використовуємо:

event.preventDefault();

Це означає:

Зупини стандартну поведінку браузера.
Я оброблю це через JavaScript.

Без цього сторінка перезавантажиться.

Повідомлення зникне.

Душа покине тіло.

Потім ти згадаєш preventDefault.

Класика.

Кілька Event Listener-ів

Один елемент може мати кілька event listener-ів.

Приклад:

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

button.addEventListener("click", function () {
  console.log("Перший listener");
});

button.addEventListener("click", function () {
  console.log("Другий listener");
});

Коли кнопку натиснуть, обидві функції запустяться.

Це може бути корисно.

Але будь обережний.

Занадто багато listener-ів можуть зробити код складним для розуміння.

Твоя кнопка не повинна мати емоційну складність детективного роману.

Тримай усе в порядку.

Створи Інтерактивну Форму Відгуку

Тепер створимо маленьку форму відгуку.

Онови index.html:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Події</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>Події</h1>

  <div class="card">
    <form id="feedbackForm">
      <label for="nameInput">Імʼя</label>
      <input id="nameInput" type="text" placeholder="Твоє імʼя">

      <label for="feedbackInput">Відгук</label>
      <textarea id="feedbackInput" placeholder="Напиши свій відгук"></textarea>

      <button type="submit">Відправити Відгук</button>
    </form>

    <p id="message" class="message">Заповни форму й відправ її.</p>
  </div>

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

Тепер онови 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("Заповни всі поля.", "error");
    return;
  }

  showMessage(`Дякуємо, ${name}! Твій відгук отримано.`, "success");

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

feedbackForm.addEventListener("submit", handleFeedbackSubmit);

Онови браузер.

Спробуй відправити порожню форму.

Має зʼявитися помилка.

Заповни форму.

Відправ знову.

Має зʼявитися повідомлення про успіх.

Форма реагує.

DOM оновлюється.

Input-и очищаються.

Це дуже близько до справжньої веброзробки.

Не повний backend.

Не база даних.

Але frontend-поведінка реальна.

Сторінка тепер відповідає як цивілізована істота.

Переважно.

Як Працює Цей Код

Це знаходить форму й input-и:

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("Заповни всі поля.", "error");
    return;
  }

  showMessage(`Дякуємо, ${name}! Твій відгук отримано.`, "success");

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

Це підключає форму до функції:

feedbackForm.addEventListener("submit", handleFeedbackSubmit);

Важливий шаблон:

Форму відправлено.

Стандартну поведінку зупинено.

Значення input-ів перевірено.

Повідомлення показано.

Input-и очищено.

Цей шаблон є всюди.

Контактні форми.

Логін.

Пошук.

Checkout.

Інтернет — це фактично форми в різному одязі.

Типові Помилки

Викликати Функцію Одразу

Неправильно:

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

Правильно:

button.addEventListener("click", handleClick);

Без дужок ти передаєш функцію.

З дужками ти викликаєш її одразу.

Ця помилка дуже поширена.

Дуже підступна.

Дуже JavaScript.

Забути preventDefault у Формах

Неправильно:

function handleSubmit(event) {
  messageElement.textContent = "Форму відправлено!";
}

Правильно:

function handleSubmit(event) {
  event.preventDefault();
  messageElement.textContent = "Форму відправлено!";
}

Без preventDefault сторінка може перезавантажитися.

Тоді зміни зникнуть.

Потім ти дивишся на екран.

Потім згадуєш.

Вибрати Неправильний Елемент

Якщо це повертає null:

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

Перевір HTML.

Можливо, id інший.

Приклад:

<button id="submitButton">Відправити</button>

Тоді JavaScript має використовувати:

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

ID має збігатися точно.

JavaScript не детектив.

Він не здогадається.

Забути .value

Неправильно:

const name = nameInput;

Правильно:

const name = nameInput.value;

Елемент input — це не те саме, що значення всередині нього.

Елемент — це коробка.

.value — це те, що користувач написав у коробці.

Дуже важливо.

Коробка.

Вміст.

Різні речі.

Як коробка від піци й піца.

Не їж коробку.

Практика

Створи сторінку з:

input;
кнопкою;
абзацом.

Коли користувач щось вводить і натискає кнопку:

прочитай значення input;
покажи його в абзаці;
очисти input.

Приклад:

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);

Потім додай умову.

Якщо input порожній, покажи:

Введи щось.

Запусти.

Зміни.

Зламай.

Полагодь.

Події стають нормальними тільки після практики.

Не після думок про практику.

Я перевіряв.

Мінічелендж

Створи маленьку форму логіну.

Сторінка має мати:

input email;
input password;
кнопку submit;
місце для повідомлення.

Правила:

якщо email порожній, покажи помилку;
якщо password порожній, покажи помилку;
якщо password коротший за 6 символів, покажи помилку;
інакше покажи повідомлення про успіх.

Приклад повідомлення успіху:

Дані для входу виглядають правильними.

Не створюй ще справжню систему логіну.

Це тільки frontend validation.

Без бази даних.

Без backend.

Без секретного хакерського бункера.

Тільки події, input-и та умови.

Все одно корисно.

Все одно важливо.

Підсумок

Сьогодні ти вивчив:

події — це речі, які відбуваються в браузері;
JavaScript може слухати події;
addEventListener зʼєднує подію з функцією;
click-події реагують на натискання кнопок;
input-події реагують на введення тексту;
обʼєкт event містить інформацію про подію;
event.target показує елемент, який викликав подію;
події клавіатури можуть визначати натиснуті клавіші;
submit-події обробляють форми;
preventDefault зупиняє стандартну поведінку браузера;
значення input-ів читаються через .value;
події та DOM разом створюють взаємодію.

Це величезний крок.

DOM дозволяє JavaScript змінювати сторінку.

Події кажуть JavaScript, коли змінювати сторінку.

Разом вони створюють справжню взаємодію.

Кнопки відповідають.

Форми реагують.

Повідомлення оновлюються.

Користувачі натискають різні речі.

JavaScript намагається встигати.

Героїчно.

Трохи стресово.

Але героїчно.

Наступна Лекція

У наступній лекції ми детальніше вивчимо форми та валідацію.

Форми всюди в інтернеті.

Контактні форми.

Логін.

Поля пошуку.

Checkout.

Підписки на newsletter.

Маленькі коробки, в які користувачі вводять свою долю.

JavaScript допоможе нам перевіряти ці дані перед тим, як відправляти їх кудись.