События

С возвращением.

В предыдущем уроке ты познакомился с 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="ru">
<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="ru">
<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="ru">
<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="ru">
<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 поможет нам проверять эти данные перед тем, как отправлять их куда-нибудь.