События: addEventListener

Введение

После практики функций и DOM переходим к событиям — реакции на действия пользователя: клик, ввод, отправка формы. addEventListener — рекомендуемый способ подписки. Работаем с элементами, выбранными через querySelector и созданными в DOM.

Задачи

• Подписываться на события через addEventListener.
• Обрабатывать клики, ввод и отправку формы (click, input, submit).
• Использовать event.target и preventDefault() где нужно.

addEventListener

const btn = document.querySelector("button");
btn.addEventListener("click", function() {
  console.log("Клик!");
});

Блок-схема обработки события

Типы событий

click | input | change | submit | keydown | load

event.target

btn.addEventListener("click", function(event) {
  console.log(event.target); // элемент, на котором сработало
});

preventDefault

Отменяет действие по умолчанию (например, отправку формы):

form.addEventListener("submit", function(e) {
  e.preventDefault();
});

Подведём итоги

addEventListener — основа интерактивности. На следующем уроке — обработка форм.

Типичные ошибки

• Вешать addEventListener несколько раз на один элемент — обработчик сработает многократно.
• Путать event.target (элемент, по которому кликнули) и event.currentTarget (элемент с обработчиком) — программа завершится ошибкой или даст неверный результат.
• Забывать preventDefault() для submit — форма отправится, и страница перезагрузится.
• Использовать onclick в HTML вместо addEventListener — обработчики будет сложнее добавлять и удалять.

Домашнее задание

Упражнение №1

Кнопка. По клику меняй цвет фона страницы на случайный. Используй addEventListener.

Упражнение №2

Поле ввода. Событие input — выводи в консоль текущее значение. Событие focus/blur — сообщения.

Упражнение №3

Делегирование: один обработчик на родительский ul. По клику на li выводи его текст (event.target).

Упражнение №4

Форма. preventDefault при submit, выведи данные полей в консоль.