События

01 Что такое событие и addEventListener

Пока вы пишете код сверху вниз, он выполняется один раз и заканчивается. Но пользователь делает что-то позже и непредсказуемо: кликает, нажимает клавишу, вводит текст, прокручивает страницу. Браузер замечает каждое такое действие и создаёт событие — сигнал «что-то произошло». Наша задача — заранее сказать: «если случится вот это событие на вот этом элементе — выполни вот эту функцию».

Событие

Сигнал от браузера: click, input, submit, keydown… У каждого события есть тип — строка с названием.

Обработчик

Функция, которая выполнится, когда событие случится. Ещё говорят handler или listener («слушатель»).

Подписка

Связка «элемент + тип события + функция». Делается один раз, а срабатывает сколько угодно раз.

Как выглядит подписка

Посмотрим на живом примере. Мы создаём кнопку, подписываемся на клик и «нажимаем» кнопку из кода двумя вызовами click():

document.body.innerHTML = `<button id="buy">Купить</button>`;
const buy = document.querySelector("#buy");

function onBuy() {
  console.log("Спасибо за покупку!");
}

buy.addEventListener("click", onBuy);
console.log("Обработчик навешен, клика ещё не было");

buy.click();   // программный клик — как будто нажали мышкой
buy.click();

Обратите внимание: обработчик не выполняется в момент addEventListener. Он просто запоминается и ждёт. Каждый клик вызывает его заново.

Попробуйте по-настоящему

Нажмите ▶ Запустить, а потом кликайте по кнопке в предпросмотре. Попробуйте поменять текст в обработчике или сделать так, чтобы счётчик рос сразу на 5.

<button id="like">❤ Нравится</button>
<p>Лайков: <b id="count">0</b></p>

button { font: inherit; padding: 8px 16px; border-radius: 10px; border: 1px solid #d0d5dd; background: #fff; cursor: pointer; }
button:active { transform: scale(.97); }

const like = document.querySelector("#like");
const count = document.querySelector("#count");
let likes = 0;

like.addEventListener("click", () => {
  likes++;
  count.textContent = likes;
  console.log("Лайков уже: " + likes);
});

Три способа повесить обработчик

Главная разница видна, когда обработчиков несколько. Свойство onclick хранит одну функцию — следующее присваивание затирает предыдущее. А addEventListener складывает их в список, и они срабатывают в порядке добавления:

document.body.innerHTML = `<button id="b">Кнопка</button>`;
const b = document.querySelector("#b");

b.onclick = () => console.log("onclick №1");
b.onclick = () => console.log("onclick №2");   // затёр первый!

b.addEventListener("click", () => console.log("слушатель №1"));
b.addEventListener("click", () => console.log("слушатель №2"));

b.click();

document.body.innerHTML = `<button id="b">Кнопка</button>`;
const b = document.querySelector("#b");

function hello() {
  console.log("Салом!");
}

b.addEventListener("click", hello());   // ✖ скобки: «Салом!» выведется сразу, один раз
console.log("Клика ещё не было, а салом уже прозвучал");
b.click();   // а на клик никто не отвечает

Если нужно передать в обработчик свои данные, оборачивайте вызов в стрелочную функцию: b.addEventListener("click", () => hello("Мадина")).

Снять обработчик и сработать один раз

Подписку можно отменить: removeEventListener с теми же параметрами. Поэтому функцию нужно хранить в переменной — анонимную стрелку снять не получится, это будет «другая» функция.

document.body.innerHTML = `<button id="b">Талон</button>`;
const b = document.querySelector("#b");

function takeTicket() {
  console.log("Ваш талон выдан");
  b.removeEventListener("click", takeTicket);   // тот же элемент, тип и функция
}

b.addEventListener("click", takeTicket);
b.click();
b.click();   // тишина — обработчик снят
console.log("Второй клик ничего не сделал");

Для случая «сработать один раз» есть короткий путь — третий аргумент с настройками. Браузер сам снимет обработчик после первого срабатывания:

document.body.innerHTML = `<button id="b">Приз</button>`;
const b = document.querySelector("#b");

b.addEventListener("click", () => console.log("Вы получили приз!"), { once: true });

b.click();
b.click();
b.click();

Читать подробнее: learn.javascript.ru — Введение в браузерные события · MDN — addEventListener

document.body.innerHTML = `<button id="bell">Дверь</button>`;
const bell = document.querySelector("#bell");

// ваш код здесь

bell.click();
bell.click();
bell.click();

Динь-динь!
Динь-динь!
Динь-динь!

document.body.innerHTML = `<button id="hi">Поздороваться</button>`;
const hi = document.querySelector("#hi");

function sayHello() {
  console.log("Салом, Мадина!");
}

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

console.log("Кнопка готова");
hi.click();
hi.click();

Кнопка готова
Салом, Мадина!
Салом, Мадина!

document.body.innerHTML = `<button id="b">Кнопка</button>`;
const b = document.querySelector("#b");
const actual = [];

b.onclick = () => actual.push("A");
b.onclick = () => actual.push("B");
b.addEventListener("click", () => actual.push("C"));
b.addEventListener("click", () => actual.push("D"));
b.click();

const prediction = [];   // впишите буквы в строках, например ["X", "Y"]

console.log(prediction.join(" ") === actual.join(" ") ? "Прогноз верный" : "Прогноз неверный");

Прогноз верный

document.body.innerHTML = `<button id="promo">Скидка</button>`;
const promo = document.querySelector("#promo");
let count = 0;

function onClick() {
  // ваш код здесь
}

promo.addEventListener("click", onClick);

for (let i = 0; i < 5; i++) {
  promo.click();
}

Клик 1
Клик 2
Клик 3
Лимит исчерпан, обработчик снят

02 Объект события

Когда браузер вызывает ваш обработчик, он передаёт ему один аргумент — объект события. Обычно его называют event, evt или коротко e. В нём лежит всё, что известно о случившемся: какого оно типа, на каком элементе произошло, где была мышь, какая клавиша нажата.

document.body.innerHTML = `<button id="pay" class="btn">Оплатить</button>`;
const pay = document.querySelector("#pay");

pay.addEventListener("click", (event) => {
  console.log("Тип события:", event.type);
  console.log("Элемент:", event.target.id);
  console.log("Тег:", event.target.tagName);
  console.log("Это Event?", event instanceof Event);
});

pay.click();

Самые полезные свойства

Мышь и клавиатура

Как «нажать клавишу» из кода? Создаём событие вручную и отправляем его элементу методом dispatchEvent. Так мы будем делать в задачах — для вашего обработчика это выглядит как настоящее нажатие.

document.body.innerHTML = `<input id="field" placeholder="Введите имя">`;
const field = document.querySelector("#field");

field.addEventListener("keydown", (e) => {
  console.log("Нажата клавиша:", e.key);
});

field.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));
field.dispatchEvent(new KeyboardEvent("keydown", { key: "a" }));

document.body.innerHTML = `<div id="map" style="width:300px;height:200px">Карта</div>`;
const map = document.querySelector("#map");

map.addEventListener("click", (e) => {
  console.log(`Клик в точке (${e.clientX}, ${e.clientY})`);
});

map.dispatchEvent(new MouseEvent("click", { clientX: 120, clientY: 45 }));

target и currentTarget: кто сработал и кто слушает

Это два разных свойства, и путаница между ними — одна из самых частых. Пусть внутри кнопки есть значок <b>. Если щёлкнуть по значку, то:

target

Самый глубокий элемент, по которому реально щёлкнули: значок <b>.

currentTarget

Элемент, у которого вызван обработчик: кнопка. Всегда тот, на ком вы написали addEventListener.

document.body.innerHTML = `<button id="cart"><b id="icon">🛒</b> Корзина</button>`;
const cart = document.querySelector("#cart");
const icon = document.querySelector("#icon");

cart.addEventListener("click", (e) => {
  console.log("target:", e.target.tagName);
  console.log("currentTarget:", e.currentTarget.tagName);
});

icon.click();   // щёлкнули по значку внутри кнопки
cart.click();   // щёлкнули по самой кнопке

Пока элемент один, они совпадают. Но как только внутри есть вложенные элементы, target может оказаться «глубже». Это важно: в разделе 06 мы построим на этом целую технику.

document.body.innerHTML = `<button id="b">Кнопка</button>`;
const b = document.querySelector("#b");

b.addEventListener("click", (e) => {
  console.log(e.key);        // undefined — клавиши у клика нет
  console.log(e.clientX);    // а координаты есть (0, потому что клик программный)
});
b.click();

Если сомневаетесь, какие свойства есть у события, выведите весь объект: console.log(e) — и посмотрите в DevTools.

Читать подробнее: learn.javascript.ru — Объект события · MDN — Event.currentTarget · MDN — KeyboardEvent.key

document.body.innerHTML = `<button id="pay">Оплатить</button>`;
const pay = document.querySelector("#pay");

pay.addEventListener("click", (event) => {
  // ваш код здесь
});

pay.click();

Событие: click
Элемент: pay
Тег: BUTTON

document.body.innerHTML = `<input id="msg">`;
const msg = document.querySelector("#msg");

// ваш код здесь

for (const key of ["a", "Enter", "Escape"]) {
  msg.dispatchEvent(new KeyboardEvent("keydown", { key }));
}

Нажата клавиша: a
Отправка
Очистка

document.body.innerHTML = `<button id="order"><b id="icon">🚕</b> Заказать такси</button>`;
const order = document.querySelector("#order");
const icon = document.querySelector("#icon");

// ваш код здесь: обработчик на order

icon.click();
console.log("---");
order.click();

target: B
currentTarget: BUTTON
---
target: BUTTON
currentTarget: BUTTON

03 Какие бывают события

Событий в браузере десятки, но в повседневной работе вы будете пользоваться пятью-семью. Вот те, что встречаются в каждом втором проекте:

input: значение поля на каждую букву

Текст из поля читаем через event.target.value (или input.value). Это всегда строка, даже если пользователь ввёл цифры. Чтобы сымитировать ввод в коде, ставим value и отправляем событие input:

document.body.innerHTML = `<input id="name">`;
const name = document.querySelector("#name");

name.addEventListener("input", (e) => {
  console.log("Сейчас в поле:", e.target.value);
});

for (const text of ["Ф", "Фа", "Фар", "Фарход"]) {
  name.value = text;
  name.dispatchEvent(new Event("input"));
}

change, checkbox и select

У флажка читаем checked (true/false), у выпадающего списка — value выбранного пункта:

document.body.innerHTML = `
  <label><input type="checkbox" id="sugar"> С сахаром</label>
  <select id="tea"><option>Чёрный</option><option>Зелёный</option></select>`;
const sugar = document.querySelector("#sugar");
const tea = document.querySelector("#tea");

sugar.addEventListener("change", (e) => console.log("Сахар:", e.target.checked));
tea.addEventListener("change", (e) => console.log("Чай:", e.target.value));

sugar.checked = true;
sugar.dispatchEvent(new Event("change"));
tea.value = "Зелёный";
tea.dispatchEvent(new Event("change"));

Живой пример: поиск и счётчик

Нажмите ▶ Запустить и печатайте в поле. Список фильтруется на каждую букву — это событие input в чистом виде.

<input id="search" placeholder="Найти город…">
<small id="info">Введите хотя бы букву</small>
<ul id="cities">
  <li>Душанбе</li><li>Худжанд</li><li>Бохтар</li>
  <li>Куляб</li><li>Истаравшан</li><li>Хорог</li>
</ul>

input { font: inherit; padding: 8px 12px; border: 1px solid #d0d5dd; border-radius: 10px; }
small { margin-left: 8px; color: #667085; }
li { padding: 2px 0; }

const search = document.querySelector("#search");
const info = document.querySelector("#info");
const items = document.querySelectorAll("#cities li");

search.addEventListener("input", (event) => {
  const query = event.target.value.trim().toLowerCase();
  let shown = 0;

  items.forEach((li) => {
    const match = li.textContent.toLowerCase().includes(query);
    li.hidden = !match;          // прячем несовпавшие
    if (match) shown++;
  });

  info.textContent = `Символов: ${query.length}, найдено: ${shown}`;
  console.log(`Запрос «${query}» → ${shown}`);
});

Читать подробнее: learn.javascript.ru — Клавиатура: keydown и keyup · MDN — Справочник событий

document.body.innerHTML = `<textarea id="about"></textarea>`;
const about = document.querySelector("#about");

// ваш код здесь

for (const text of ["Привет", "Привет, Душанбе"]) {
  about.value = text;
  about.dispatchEvent(new Event("input"));
}

Символов: 6
Символов: 15

document.body.innerHTML = `<input id="q">`;
const q = document.querySelector("#q");
const cities = ["Душанбе", "Худжанд", "Бохтар", "Куляб", "Истаравшан", "Хорог"];

// ваш код здесь

for (const text of ["ху", " ХО ", "а", "щ"]) {
  q.value = text;
  q.dispatchEvent(new Event("input"));
}

Запрос «ху»: Худжанд
Запрос «ХО»: Хорог
Запрос «а»: Душанбе, Худжанд, Бохтар, Истаравшан
Запрос «щ»: ничего не найдено

document.body.innerHTML = `
  <select id="city"><option>Душанбе</option><option>Худжанд</option></select>
  <label><input type="checkbox" id="delivery"> Доставка</label>`;
const city = document.querySelector("#city");
const delivery = document.querySelector("#delivery");
const price = 100;
const fees = { "Душанбе": 10, "Худжанд": 25 };

function recalc() {
  // ваш код здесь: посчитать и вывести «Итого: N сомони»
}

// ваш код здесь: подписки на change

const fire = (el) => el.dispatchEvent(new Event("change"));
city.value = "Худжанд"; fire(city);
delivery.checked = true; fire(delivery);
city.value = "Душанбе"; fire(city);
delivery.checked = false; fire(delivery);

Итого: 100 сомони
Итого: 125 сомони
Итого: 110 сомони
Итого: 100 сомони

04 Действие по умолчанию: preventDefault

У многих событий у браузера есть своё действие по умолчанию. Оно выполнится после ваших обработчиков, если его не остановить:

• клик по ссылке <a href> — переход на другую страницу;
• отправка формы — перезагрузка страницы с данными;
• клик правой кнопкой — контекстное меню;
• Ctrl + S — окно «Сохранить страницу»;
• пробел на странице — прокрутка вниз.

Метод event.preventDefault() говорит браузеру: «Не надо, дальше я сам». Ваш код при этом продолжает работать как обычно.

document.body.innerHTML = `<a id="promo" href="https://example.com/promo">Акция недели</a>`;
const promo = document.querySelector("#promo");

promo.addEventListener("click", (e) => {
  e.preventDefault();                       // остаёмся на странице
  console.log("Переход отменён:", e.defaultPrevented);
});

promo.click();

Главный случай: форма

Отправка формы по умолчанию перезагружает страницу: всё, что JavaScript успел нарисовать, исчезает. Поэтому почти любая форма на современном сайте обрабатывается так: слушаем submit у формы (не click у кнопки!), делаем preventDefault() и работаем с данными сами.

Почему именно submit, а не клик по кнопке? Форму можно отправить клавишей Enter в поле — клика по кнопке при этом не будет, а submit сработает всегда. В наших задачах форму «отправляет» код: он вручную запускает событие submit командой form.dispatchEvent(new Event("submit", { cancelable: true })). Обработчик не заметит разницы, а страница при этом не перезагрузится.

document.body.innerHTML = `
  <form id="order">
    <input id="who" value="Мадина">
    <button>Заказать</button>
  </form>`;
const order = document.querySelector("#order");
const who = document.querySelector("#who");

order.addEventListener("submit", (e) => {
  e.preventDefault();   // без этой строки страница бы перезагрузилась
  console.log("Заказ для:", who.value);
});

order.dispatchEvent(new Event("submit", { cancelable: true }));
who.value = "Фарход";
order.dispatchEvent(new Event("submit", { cancelable: true }));

Попробуйте сами

Нажмите ▶ Запустить, введите имя и нажмите Enter или кнопку. Страница не перезагружается, имя добавляется в список — это работа preventDefault.

<form id="join">
  <input id="who" placeholder="Ваше имя" autocomplete="off">
  <button>Записаться</button>
</form>
<ol id="people"></ol>

input, button { font: inherit; padding: 8px 12px; border-radius: 10px; border: 1px solid #d0d5dd; }
button { background: #fff; cursor: pointer; }

const join = document.querySelector("#join");
const who = document.querySelector("#who");
const people = document.querySelector("#people");

join.addEventListener("submit", (event) => {
  event.preventDefault();
  const name = who.value.trim();
  if (name === "") return;           // пустое имя не добавляем

  const li = document.createElement("li");
  li.textContent = name;
  people.append(li);
  who.value = "";
  console.log("Записано человек:", people.children.length);
});

Не путать с stopPropagation

document.body.innerHTML = `<form id="f"><input id="i"></form>`;
const f = document.querySelector("#f");
const i = document.querySelector("#i");

f.addEventListener("submit", (e) => {
  if (i.value === "") {
    console.log("Пусто!");
    return;                // ✖ вышли, не отменив отправку
  }
  e.preventDefault();
  console.log("Отправка", i.value);
});

// имитируем отправку пустой формы и смотрим, отменили ли мы действие браузера
const ev = new Event("submit", { cancelable: true });
f.dispatchEvent(ev);
console.log("Перезагрузка отменена?", ev.defaultPrevented);

Читать подробнее: learn.javascript.ru — Действия браузера по умолчанию · MDN — Event.preventDefault

document.body.innerHTML = `<a id="promo" href="https://example.com">Скидки</a>`;
const promo = document.querySelector("#promo");

// ваш код здесь

promo.click();

Переход отменён
true

document.body.innerHTML = `
  <form id="apply">
    <input id="name">
    <input id="phone">
    <button>Отправить</button>
  </form>`;
const apply = document.querySelector("#apply");
const nameInput = document.querySelector("#name");
const phoneInput = document.querySelector("#phone");

// ваш код здесь

nameInput.value = "Мадина";
phoneInput.value = "900 11 22 33";
apply.dispatchEvent(new Event("submit", { cancelable: true }));

nameInput.value = "   ";
apply.dispatchEvent(new Event("submit", { cancelable: true }));

Заявка: Мадина, 900 11 22 33
Введите имя

const press = (key, ctrl, shift) => {
  const ev = new KeyboardEvent("keydown", { key, ctrlKey: ctrl, shiftKey: shift, bubbles: true, cancelable: true });
  document.dispatchEvent(ev);
  const label = (ctrl ? "Ctrl + " : "") + (shift ? "Shift + " : "") + key;
  console.log(`${label}: действие по умолчанию ${ev.defaultPrevented ? "отменено" : "работает"}`);
};

// ваш код здесь: подписка на keydown у document

press("s", true, false);
press("S", true, true);
press("a", false, false);
press("z", true, false);

Сохранено
Ctrl + s: действие по умолчанию отменено
Сохранить как…
Ctrl + Shift + S: действие по умолчанию отменено
a: действие по умолчанию работает
Отмена
Ctrl + z: действие по умолчанию отменено

05 Всплытие и перехват

Что произойдёт, если кнопка лежит внутри карточки, а карточка — внутри списка, и на каждом из них висит свой обработчик клика? Сработают все три — и в очень определённом порядке. Событие не «застревает» на элементе, по которому кликнули: оно путешествует по цепочке родителей.

1. Погружение (capturing). Событие спускается от document к цели. Обработчики здесь срабатывают только если вы специально попросили: { capture: true }. Нужно редко.
2. Цель (target). Событие доходит до элемента, по которому кликнули.
3. Всплытие (bubbling). Событие поднимается обратно вверх до самого document. На этой фазе работают все обычные обработчики.

document.body.innerHTML = `
  <ul id="list">
    <li id="card"><button id="btn">В корзину</button></li>
  </ul>`;

for (const id of ["btn", "card", "list"]) {
  document.getElementById(id).addEventListener("click", (e) => {
    console.log(`сработал ${e.currentTarget.id}, а кликнули по ${e.target.id}`);
  });
}

document.getElementById("btn").click();

Обратите внимание на две вещи: порядок идёт снизу вверх, а target на всём пути остаётся одним и тем же — это тот, по кому кликнули. Меняется только currentTarget.

Посмотрите вживую

Нажмите ▶ Запустить и кликните по внутренней кнопке, потом по средней и внешней рамке. Включите флажок — и всплытие остановится на кнопке.

<div id="outer" class="box">outer
  <div id="middle" class="box">middle
    <button id="inner">inner (нажмите)</button>
  </div>
</div>
<label><input type="checkbox" id="stop"> stopPropagation на кнопке</label>
<button id="clear">Очистить журнал</button>
<ol id="log"></ol>

.box { padding: 10px 14px; margin: 6px 0; border: 2px solid #98a2b3; border-radius: 10px; }
#outer { border-color: #2e90fa; }
#middle { border-color: #f79009; }
button { font: inherit; padding: 4px 10px; }

const log = document.querySelector("#log");
const stop = document.querySelector("#stop");

function write(text) {
  const li = document.createElement("li");
  li.textContent = text;
  log.append(li);
  console.log(text);
}

for (const id of ["outer", "middle", "inner"]) {
  document.getElementById(id).addEventListener("click", (event) => {
    write(`${event.currentTarget.id} (target: ${event.target.id})`);
    if (id === "inner" && stop.checked) event.stopPropagation();
  });
}

document.querySelector("#clear").addEventListener("click", (e) => {
  log.innerHTML = "";
  e.stopPropagation();
});

stopPropagation: оборвать путь

event.stopPropagation() прекращает всплытие: родители событие не получат. Выглядит соблазнительно, но используйте осторожно. Остановленное событие перестанет доходить и до чужого кода — например, до счётчика аналитики на document, и вы будете долго искать, почему он «пропускает» клики. Лучше обычно проверить в обработчике родителя, куда именно кликнули: event.target === event.currentTarget.

Перехват: { capture: true }

Если третьим аргументом передать true или { capture: true }, обработчик сработает на фазе погружения — раньше, чем у самой цели. Так можно «встретить» событие до того, как оно дойдёт вниз.

document.body.innerHTML = `<div id="wrap"><button id="btn">Кнопка</button></div>`;
const wrap = document.querySelector("#wrap");
const btn = document.querySelector("#btn");

wrap.addEventListener("click", () => console.log("wrap: всплытие"));
wrap.addEventListener("click", () => console.log("wrap: перехват"), { capture: true });
btn.addEventListener("click", () => console.log("button: цель"));

btn.click();

Порядок: сначала перехват у wrap (спуск вниз), потом сама кнопка, потом всплытие у wrap.

document.body.innerHTML = `<div id="form"><input id="field"></div>`;
const form = document.querySelector("#form");
const field = document.querySelector("#field");

form.addEventListener("input", () => console.log("форма услышала ввод"));

field.dispatchEvent(new Event("input"));                      // ✖ не всплывает — тишина
console.log("---");
field.dispatchEvent(new Event("input", { bubbles: true }));   // ✔ всплывает

Читать подробнее: learn.javascript.ru — Всплытие и погружение · MDN — Event.stopPropagation

document.body.innerHTML = `
  <div id="a">
    <div id="b">
      <button id="c">Кнопка</button>
    </div>
  </div>`;
const actual = [];

for (const id of ["a", "b", "c"]) {
  document.getElementById(id).addEventListener("click", () => actual.push(id));
}
document.getElementById("c").click();

const prediction = [];   // например ["x", "y", "z"]

console.log(prediction.join(" ") === actual.join(" ") ? "Прогноз верный" : "Прогноз неверный");

Прогноз верный

document.body.innerHTML = `<div id="wrap"><button id="btn">Купить</button></div>`;
const wrap = document.querySelector("#wrap");
const btn = document.querySelector("#btn");

btn.addEventListener("click", () => console.log("Кнопка"));
wrap.addEventListener("click", () => console.log("Всплытие: wrap"));

// ваш код здесь

btn.click();

Перехват: wrap
Кнопка
Всплытие: wrap

document.body.innerHTML = `
  <div id="overlay">
    <div id="modal">Вы уверены?</div>
  </div>`;
const overlay = document.querySelector("#overlay");
const modal = document.querySelector("#modal");

modal.addEventListener("click", () => {
  console.log("Клик внутри окна");
});

overlay.addEventListener("click", () => {
  console.log("Окно закрыто");
});

modal.click();
overlay.click();

Клик внутри окна
Окно закрыто

document.body.innerHTML = `
  <main id="shop">
    <article class="card">
      <h3 id="title">Дыня</h3>
      <p class="info">Цена: <b id="price">12</b></p>
      <button id="buy">Купить</button>
    </article>
  </main>`;
const shop = document.querySelector("#shop");

// тег в нижнем регистре + "#id", если есть + ".класс", если есть
function describe(el) {
  // ваш код здесь
}

// ваш код здесь: обработчик клика на shop

for (const id of ["price", "title", "buy", "shop"]) {
  document.getElementById(id).click();
}

b#price < p.info < article.card < main#shop
h3#title < article.card < main#shop
button#buy < article.card < main#shop
main#shop

06 Делегирование событий

Допустим, у вас список из 50 дел, и у каждого — кнопка «Удалить». Первая мысль: пройти циклом и повесить обработчик на каждую кнопку. Это работает, но есть три проблемы:

• Много обработчиков. 50 кнопок — 50 слушателей в памяти. А если строк 5000?
• Новые элементы «глухие». Пользователь добавил дело — у новой кнопки обработчика нет, потому что цикл отработал раньше.
• Лишняя работа. Каждый элемент нужно подписывать и, при удалении, отписывать.

Решение использует всплытие из прошлого раздела. Клик по любой кнопке всё равно всплывёт до общего родителя — списка. Значит, достаточно одного обработчика на родителе: он узнаёт, кто именно был целью, и решает, что делать. Это называется делегированием — родитель принимает события «по доверенности» за всех детей.

Два подхода рядом

for (const btn of list.querySelectorAll("button")) {
  btn.addEventListener("click", remove);
}
// новые кнопки — без обработчика

list.addEventListener("click", (event) => {
  const btn = event.target.closest("button");
  if (!btn) return;
  remove(btn);
});
// работает и для будущих кнопок

Новый инструмент: closest

Проблема: event.target — это самый глубокий элемент, по которому кликнули. Если в кнопке лежит значок <span>, целью будет значок, а не кнопка. Нужно «подняться» от цели к нужному элементу. Для этого есть метод element.closest(selector): он проверяет сам элемент, затем родителя, затем родителя родителя — и возвращает первый подходящий под CSS-селектор. Если такого нет — null.

document.body.innerHTML = `
  <ul id="list">
    <li class="item"><button class="del"><span class="icon">✕</span></button></li>
  </ul>`;
const icon = document.querySelector(".icon");

console.log(icon.closest("button").className);   // del — поднялись на 1 уровень
console.log(icon.closest("li").className);       // item — на 2 уровня
console.log(icon.closest(".icon") === icon);     // true — сначала проверяется сам элемент
console.log(icon.closest("table"));              // null — такого предка нет

Ещё один инструмент: data-атрибуты

Как узнать, какую именно кнопку нажали — «удалить» или «в избранное»? И в какой строке? Не по тексту же кнопки угадывать. Для таких меток в HTML есть атрибуты data-*: вы сами придумываете имя, а в JS читаете через element.dataset.

document.body.innerHTML = `<li data-id="42" data-user-name="Мадина"><button data-action="remove">✕</button></li>`;
const li = document.querySelector("li");
const btn = document.querySelector("button");

console.log(li.dataset.id);          // "42" — всегда строка!
console.log(li.dataset.userName);    // data-user-name → userName (camelCase)
console.log(btn.dataset.action);     // "remove"
console.log(Number(li.dataset.id) + 1);   // 43 — число делаем сами

Шаблон делегирования

1. Один обработчик на общего родителя — список, таблицу, меню.
2. Найдите нужный элемент: const btn = event.target.closest("button[data-action]");
3. Ничего не нашли — выходим: if (!btn) return; (клик мимо кнопок).
4. Проверьте, что кнопка внутри вашего списка: if (!list.contains(btn)) return; Нужна, когда списки вложены друг в друга.
5. Поднимитесь к строке: const li = btn.closest("li");
6. Решайте по dataset: if (btn.dataset.action === "remove") li.remove();

document.body.innerHTML = `
  <ul id="list">
    <li data-id="1">Нон <button data-action="remove"><span>✕</span></button></li>
    <li data-id="2">Чой <button data-action="remove"><span>✕</span></button></li>
  </ul>`;
const list = document.querySelector("#list");

list.addEventListener("click", (event) => {
  const btn = event.target.closest("button[data-action]");
  if (!btn || !list.contains(btn)) return;
  const li = btn.closest("li");
  if (btn.dataset.action === "remove") {
    console.log("Удаляю №" + li.dataset.id);
    li.remove();
  }
});

list.querySelector("span").click();   // кликнули по значку внутри кнопки — работает!
console.log("Осталось:", list.children.length);

// добавим новый пункт позже — обработчик не нужен
const newLi = document.createElement("li");
newLi.dataset.id = 3;
newLi.innerHTML = `Лагман <button data-action="remove"><span>✕</span></button>`;
list.append(newLi);
newLi.querySelector("button").click();
console.log("Осталось:", list.children.length);

Попробуйте сами

Нажмите ▶ Запустить. Удалите пару пунктов, затем добавьте новый кнопкой «Добавить пункт» — и убедитесь, что у нового кнопка «✕» работает без единой лишней строки подписки.

<button id="add">Добавить пункт</button>
<ul id="menu">
  <li><span class="name">Оши палав</span> <button data-action="remove">✕</button></li>
  <li><span class="name">Лагман</span> <button data-action="remove">✕</button></li>
</ul>

li { padding: 4px 0; }
button { font: inherit; padding: 2px 10px; border-radius: 8px; border: 1px solid #d0d5dd; background: #fff; cursor: pointer; }

const menu = document.querySelector("#menu");
const dishes = ["Манту", "Самбуса", "Шурпо", "Кабоб"];
let next = 0;

// ОДИН обработчик на весь список
menu.addEventListener("click", (event) => {
  const btn = event.target.closest("button[data-action]");
  if (!btn) return;
  const li = btn.closest("li");
  console.log("Убрали:", li.querySelector(".name").textContent);
  li.remove();
});

document.querySelector("#add").addEventListener("click", () => {
  const li = document.createElement("li");
  li.innerHTML = `<span class="name"></span> <button data-action="remove">✕</button>`;
  li.querySelector(".name").textContent = dishes[next++ % dishes.length];
  menu.append(li);
});

document.body.innerHTML = `
  <ul id="list">
    <li>Нон <button><span id="icon">✕</span></button></li>
  </ul>`;
const list = document.querySelector("#list");

list.addEventListener("click", (event) => {
  if (event.target.tagName === "BUTTON") {          // ✖ цель — это SPAN
    console.log("Кнопка нажата");
  } else {
    console.log("Цель:", event.target.tagName);     // мы окажемся здесь
  }
});

document.querySelector("#icon").click();

Бывает и обратное: делегирование — не всегда лучшее решение. Если элемент один (например, кнопка «Войти»), просто повесьте обработчик на него. Делегирование нужно для списков, таблиц, меню — там, где элементов много или они добавляются и удаляются.

Читать подробнее: learn.javascript.ru — Делегирование событий · MDN — Element.closest · MDN — data-атрибуты

document.body.innerHTML = `<ul id="menu"><li>Оши палав</li><li>Лагман</li><li>Манту</li></ul>`;
const menu = document.querySelector("#menu");

// ваш код здесь: один обработчик на menu

for (const li of menu.children) {
  li.click();
}
menu.click();   // мимо пунктов — реакции быть не должно

Выбрано: Оши палав
Выбрано: Лагман
Выбрано: Манту

document.body.innerHTML = `
  <ul id="list">
    <li data-id="1"><span class="name">Оши палав</span> <button data-action="like">♥</button> <button data-action="remove">✕</button></li>
    <li data-id="2"><span class="name">Лагман</span> <button data-action="like">♥</button> <button data-action="remove">✕</button></li>
    <li data-id="3"><span class="name">Манту</span> <button data-action="like">♥</button> <button data-action="remove">✕</button></li>
  </ul>`;
const list = document.querySelector("#list");

// ваш код здесь

const press = (id, action) =>
  document.querySelector(`li[data-id="${id}"] [data-action="${action}"]`).click();

press(2, "like");
press(3, "remove");
press(1, "like");
list.querySelector(".name").click();   // клик по названию — игнорируем
console.log("Осталось: " + list.children.length);

Нравится: Лагман (№2)
Удалено: Манту (№3)
Нравится: Оши палав (№1)
Осталось: 2

document.body.innerHTML = `<ul id="menu"><li>Нон</li><li>Чой</li></ul>`;
const menu = document.querySelector("#menu");

// Сейчас: по обработчику на каждый пункт. Замените на ОДИН обработчик на menu
for (const li of menu.querySelectorAll("li")) {
  li.addEventListener("click", () => console.log("Заказано: " + li.textContent));
}

// --- приложение добавляет пункт (не меняйте) ---
const extra = document.createElement("li");
extra.textContent = "Самбуса";
menu.append(extra);

for (const li of menu.children) {
  li.click();
}

Заказано: Нон
Заказано: Чой
Заказано: Самбуса

document.body.innerHTML = `
  <ul id="cart">
    <li data-price="4"><span class="name">Нон</span>
      <button data-action="dec">−</button> <b class="qty">1</b> <button data-action="inc">+</button>
      <button data-action="del">✕</button></li>
    <li data-price="18"><span class="name">Чой</span>
      <button data-action="dec">−</button> <b class="qty">2</b> <button data-action="inc">+</button>
      <button data-action="del">✕</button></li>
  </ul>`;
const cart = document.querySelector("#cart");

function printTotal() {
  // ваш код здесь: сумма по всем строкам или «Корзина пуста»
}

// ваш код здесь: один обработчик на cart

const press = (name, action) => {
  const li = [...cart.children].find((x) => x.querySelector(".name").textContent === name);
  li.querySelector(`[data-action="${action}"]`).click();
};

press("Нон", "inc");
press("Чой", "dec");
press("Чой", "dec");
press("Нон", "del");

Итого: 44 сомони
Итого: 26 сомони
Итого: 8 сомони
Корзина пуста

07 ИИ-блок: как описать баг

«Кнопка не работает» — самая частая фраза начинающих программистов. И самая бесполезная: ни человек, ни ИИ не поймут, что именно сломалось. События — отличная тренировка, потому что баги в них всегда одного типа: «ожидал, что при клике будет X, а происходит Y (или ничего)». Научитесь описывать такой баг — и получите точный ответ от ИИ, а ещё чаще найдёте причину сами, пока пишете описание.

Слабый и сильный баг-репорт

Как сделать минимальный пример

1. Скопируйте проблемный кусок в отдельный файл или в песочницу на этой странице.
2. Выкиньте всё лишнее: стили, соседние компоненты, функции, которые к багу не относятся. После каждого удаления проверяйте — баг ещё воспроизводится?
3. Замените реальные данные на 2–3 простых элемента.
4. Запишите три вещи: что вы делаете (кликаю на …), что ожидали, что получили. Ошибку из консоли копируйте дословно, не пересказывайте.
5. Ещё раз прочитайте. Часто баг находится прямо на шаге 2. Это известный приём «резиновой уточки»: когда объясняешь проблему вслух, сам замечаешь ошибку.

Шаблон баг-репорта

Объяснить делегирование на своём коде

Это строка из библиотеки промптов курса. Вставьте свой код списка и попросите объяснение — но проверьте, что понимаете, почему работает event.target:

Проверка ответа: закройте ответ ИИ и своими словами объясните соседу по парте, как клик по кнопке доходит до списка. Не получается — читайте разделы 05–06 ещё раз.

Типичные ошибки ИИ в событиях

document.body.innerHTML = `
  <ul id="menu">
    <li><span class="name">Дыня</span> <button class="fav"><span class="icon">★</span></button></li>
    <li><span class="name">Гранат</span> <button class="fav"><span class="icon">★</span></button></li>
  </ul>`;
const menu = document.querySelector("#menu");

menu.addEventListener("click", (event) => {
  if (event.target.tagName === "BUTTON") {
    const name = event.target.parentElement.querySelector(".name").textContent;
    console.log("В избранное: " + name);
  }
});

// пользователь кликает по значку ★ внутри кнопки
for (const icon of document.querySelectorAll(".icon")) {
  icon.click();
}

В избранное: Дыня
В избранное: Гранат

const report = `
`;   // пишите баг-репорт между кавычками

const checks = [
  ["Есть «Ожидал:»", report.includes("Ожидал:")],
  ["Есть «Получил:»", report.includes("Получил:")],
  ["Есть точный текст ошибки", report.includes("Cannot read properties of null")],
  ["Есть минимальный код", report.includes("addEventListener")],
  ["Есть «Что пробовал:»", report.includes("Что пробовал:")],
  ["Не длиннее 600 символов", report.length <= 600]
];
for (const [name, ok] of checks) {
  console.log((ok ? "✔ " : "✖ ") + name);
}

✔ Есть «Ожидал:»
✔ Есть «Получил:»
✔ Есть точный текст ошибки
✔ Есть минимальный код
✔ Есть «Что пробовал:»
✔ Не длиннее 600 символов

08 Практика на уроке: список с кнопками

Собираем «Покупки на базар» — список, где у каждого пункта две кнопки: ♥ в избранное и ✕ удалить. Обработчик один, на весь список. Идём тремя шагами, после каждого нажимайте ▶ Запустить и проверяйте руками. Не копируйте — набирайте сами, так запоминается в разы лучше.

1. Разведка. Один обработчик на список. Узнаём, по какой кнопке и в какой строке кликнули.
2. Действия. ♥ переключает класс fav у строки, ✕ удаляет строку.
3. Счётчик. После каждого действия обновляем «Всего: N, избранных: M». Новые пункты работают сразу.

Шаг 1. Разведка

Пока ничего не меняем — только печатаем в консоль, что поняли из клика. Кликайте по ♥, по ✕, по названию и мимо кнопок.

<h4>Покупки на базар</h4>
<ul id="list">
  <li><span class="name">Морковь</span> <button data-action="fav" title="В избранное">♥</button> <button data-action="remove" title="Удалить">✕</button></li>
  <li><span class="name">Рис</span> <button data-action="fav" title="В избранное">♥</button> <button data-action="remove" title="Удалить">✕</button></li>
  <li><span class="name">Лук</span> <button data-action="fav" title="В избранное">♥</button> <button data-action="remove" title="Удалить">✕</button></li>
</ul>
<p id="count"></p>

h4 { margin: 0 0 8px; }
ul { list-style: none; padding: 0; margin: 0; max-width: 340px; }
li { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid #e4e7ec; border-radius: 10px; margin-bottom: 6px; }
.name { flex: 1; }
button { font: inherit; border: 1px solid #d0d5dd; background: #fff; border-radius: 8px; cursor: pointer; padding: 2px 8px; }
li.fav { background: #fef3f2; border-color: #fda29b; }
li.fav .name { font-weight: 700; color: #b42318; }
li.fav [data-action="fav"] { color: #d92d20; }
#count { color: #667085; font-size: 14px; }

const list = document.querySelector("#list");

list.addEventListener("click", (event) => {
  const btn = event.target.closest("button[data-action]");
  if (!btn) {
    console.log("Клик мимо кнопок:", event.target.tagName);
    return;
  }
  const li = btn.closest("li");
  const name = li.querySelector(".name").textContent;
  console.log(`Кнопка «${btn.dataset.action}» в строке «${name}»`);
});

Шаг 2. Действия

Теперь «разведку» заменяем настоящим поведением. ♥ переключает класс fav у строки (classList.toggle — из прошлого урока), ✕ удаляет строку целиком.

<h4>Покупки на базар</h4>
<ul id="list">
  <li><span class="name">Морковь</span> <button data-action="fav" title="В избранное">♥</button> <button data-action="remove" title="Удалить">✕</button></li>
  <li><span class="name">Рис</span> <button data-action="fav" title="В избранное">♥</button> <button data-action="remove" title="Удалить">✕</button></li>
  <li><span class="name">Лук</span> <button data-action="fav" title="В избранное">♥</button> <button data-action="remove" title="Удалить">✕</button></li>
</ul>
<p id="count"></p>

h4 { margin: 0 0 8px; }
ul { list-style: none; padding: 0; margin: 0; max-width: 340px; }
li { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid #e4e7ec; border-radius: 10px; margin-bottom: 6px; }
.name { flex: 1; }
button { font: inherit; border: 1px solid #d0d5dd; background: #fff; border-radius: 8px; cursor: pointer; padding: 2px 8px; }
li.fav { background: #fef3f2; border-color: #fda29b; }
li.fav .name { font-weight: 700; color: #b42318; }
li.fav [data-action="fav"] { color: #d92d20; }
#count { color: #667085; font-size: 14px; }

const list = document.querySelector("#list");

list.addEventListener("click", (event) => {
  const btn = event.target.closest("button[data-action]");
  if (!btn) return;                          // клик мимо кнопок

  const li = btn.closest("li");
  if (btn.dataset.action === "fav") {
    li.classList.toggle("fav");              // есть класс — уберёт, нет — добавит
  } else if (btn.dataset.action === "remove") {
    li.remove();
  }
});

Шаг 3. Счётчик и новые пункты

Добавляем функцию updateCount и вызываем её после каждого изменения — и один раз на старте. Кнопка «Добавить» создаёт пункт функцией makeItem. Обратите внимание: ни одной новой подписки на новые пункты — делегирование уже всё умеет.

<h4>Покупки на базар</h4>
<button id="add">+ Добавить пункт</button>
<ul id="list">
  <li><span class="name">Морковь</span> <button data-action="fav" title="В избранное">♥</button> <button data-action="remove" title="Удалить">✕</button></li>
  <li><span class="name">Рис</span> <button data-action="fav" title="В избранное">♥</button> <button data-action="remove" title="Удалить">✕</button></li>
  <li><span class="name">Лук</span> <button data-action="fav" title="В избранное">♥</button> <button data-action="remove" title="Удалить">✕</button></li>
</ul>
<p id="count"></p>

h4 { margin: 0 0 8px; }
ul { list-style: none; padding: 0; margin: 8px 0; max-width: 340px; }
li { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid #e4e7ec; border-radius: 10px; margin-bottom: 6px; }
.name { flex: 1; }
button { font: inherit; border: 1px solid #d0d5dd; background: #fff; border-radius: 8px; cursor: pointer; padding: 2px 8px; }
li.fav { background: #fef3f2; border-color: #fda29b; }
li.fav .name { font-weight: 700; color: #b42318; }
li.fav [data-action="fav"] { color: #d92d20; }
#count { color: #667085; font-size: 14px; }

const list = document.querySelector("#list");
const count = document.querySelector("#count");
const extras = ["Зира", "Помидоры", "Масло", "Чой"];
let next = 0;

function updateCount() {
  const total = list.children.length;
  const favs = list.querySelectorAll("li.fav").length;
  count.textContent = `Всего: ${total}, избранных: ${favs}`;
}

function makeItem(text) {
  const li = document.createElement("li");
  li.innerHTML = `<span class="name"></span>
    <button data-action="fav" title="В избранное">♥</button>
    <button data-action="remove" title="Удалить">✕</button>`;
  li.querySelector(".name").textContent = text;   // текст — только через textContent
  return li;
}

list.addEventListener("click", (event) => {
  const btn = event.target.closest("button[data-action]");
  if (!btn) return;

  const li = btn.closest("li");
  if (btn.dataset.action === "fav") li.classList.toggle("fav");
  else if (btn.dataset.action === "remove") li.remove();
  updateCount();
});

document.querySelector("#add").addEventListener("click", () => {
  list.append(makeItem(extras[next++ % extras.length]));
  updateCount();
});

updateCount();

<ul id="list">
  <li><span class="name">Морковь</span> <button data-action="fav">♥</button> <button data-action="remove">✕</button></li>
  <li><span class="name">Рис</span> <button data-action="fav">♥</button> <button data-action="remove">✕</button></li>
  <li><span class="name">Лук</span> <button data-action="fav">♥</button> <button data-action="remove">✕</button></li>
</ul>
<p id="count"></p>

ul { list-style: none; padding: 0; margin: 0 0 8px; max-width: 340px; }
li { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border: 1px solid #e4e7ec; border-radius: 10px; margin-bottom: 6px; }
.name { flex: 1; }
button { font: inherit; border: 1px solid #d0d5dd; background: #fff; border-radius: 8px; cursor: pointer; padding: 2px 8px; }
li.fav { background: #fef3f2; border-color: #fda29b; }
li.fav .name { font-weight: 700; color: #b42318; }

const list = document.querySelector("#list");
const count = document.querySelector("#count");

function updateCount() {
  // ваш код здесь
}

// ваш код здесь: ОДИН обработчик клика на list

updateCount();

// ===== автотест: не меняйте =====
{
  const q = (s) => document.querySelector(s);
  const state = () => console.log(q("#count").textContent);

  q('#list li:nth-child(1) [data-action="fav"]').click();
  q('#list li:nth-child(3) [data-action="fav"]').click();
  state();
  q('#list li:nth-child(2) [data-action="remove"]').click();
  state();
  q('#list li:nth-child(1) [data-action="fav"]').click();
  state();
  q("#list .name").click();     // клик мимо кнопок ничего не меняет
  q("#list").click();
  state();

  const li = document.createElement("li");    // пункт, добавленный позже
  li.innerHTML = '<span class="name">Зира</span> <button data-action="fav">♥</button> <button data-action="remove">✕</button>';
  q("#list").append(li);
  li.querySelector('[data-action="fav"]').click();
  state();
}

Всего: 3, избранных: 2
Всего: 2, избранных: 2
Всего: 2, избранных: 1
Всего: 2, избранных: 1
Всего: 3, избранных: 2

09 Домашнее задание: интерактивный список

Допишите свой «интерактивный компонент»: список с добавлением, удалением и фильтром по кнопкам. Тему выберите сами: покупки, задачи на неделю, фильмы к просмотру, любимые места Душанбе. Результат этого ДЗ пригодится в мини-проекте на уроке 12.

Что должно получиться

• Форма добавления. Поле и кнопка; пункт добавляется и по клику, и по Enter (событие submit, preventDefault). После добавления поле очищается.
• Проверки. Пустое имя (после trim()) и дубликаты (без учёта регистра) не добавляются.
• Кнопки в каждой строке: ♥ — в избранное (класс fav), ✕ — удалить. Всё через один обработчик на списке: closest + data-action.
• Фильтр. Две кнопки «Все» и «Избранные» (тоже делегированием на контейнере кнопок). Выбранная кнопка подсвечена. Фильтр продолжает работать после добавления, удаления и смены ♥.
• Счётчик «Всего: N, избранных: M».
• Чистота. Нет onclick="…" в HTML. Нет подписок на каждый li. Текст пользователя вставляется через textContent, а не innerHTML.

Ниже — стартовая заготовка-песочница с автотестом: он повторяет типичные проверки (добавление, пустой ввод, дубликат, избранное, фильтр, удаление). Когда в консоли всё сойдётся — отправляйте свою версию с вашей темой и красивыми стилями.

<form id="add-form">
  <input id="new-item" placeholder="Что купить?" autocomplete="off">
  <button>Добавить</button>
</form>
<div id="filters">
  <button data-filter="all" class="on">Все</button>
  <button data-filter="fav">Избранные</button>
</div>
<ul id="list">
  <li><span class="name">Морковь</span> <button data-action="fav">♥</button> <button data-action="remove">✕</button></li>
  <li><span class="name">Рис</span> <button data-action="fav">♥</button> <button data-action="remove">✕</button></li>
</ul>
<p id="count"></p>

form, #filters { display: flex; gap: 6px; margin-bottom: 8px; }
input { font: inherit; padding: 6px 10px; border: 1px solid #d0d5dd; border-radius: 8px; }
button { font: inherit; border: 1px solid #d0d5dd; background: #fff; border-radius: 8px; cursor: pointer; padding: 2px 10px; }
#filters .on { background: #1d2939; color: #fff; }
ul { list-style: none; padding: 0; margin: 0 0 8px; max-width: 360px; }
li { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border: 1px solid #e4e7ec; border-radius: 10px; margin-bottom: 6px; }
li[hidden] { display: none; }
.name { flex: 1; }
li.fav { background: #fef3f2; border-color: #fda29b; }
li.fav .name { font-weight: 700; color: #b42318; }

const form = document.querySelector("#add-form");
const input = document.querySelector("#new-item");
const filters = document.querySelector("#filters");
const list = document.querySelector("#list");
const count = document.querySelector("#count");
let currentFilter = "all";

function makeItem(text) {
  const li = document.createElement("li");
  li.innerHTML = `<span class="name"></span>
    <button data-action="fav">♥</button>
    <button data-action="remove">✕</button>`;
  li.querySelector(".name").textContent = text;
  return li;
}

function updateCount() {
  // ваш код здесь: «Всего: N, избранных: M»
}

function applyFilter() {
  // ваш код здесь: прячем (li.hidden = true) то, что не подходит под currentFilter
}

// ваш код здесь:
// 1) submit у формы: preventDefault, trim, пустое и дубликат (без учёта регистра) — не добавлять, иначе append(makeItem(...)) и очистка поля
// 2) ОДИН click на list: ♥ — toggle "fav", ✕ — remove
// 3) ОДИН click на filters: запомнить фильтр (data-filter), подсветить кнопку классом "on"
// после каждого изменения — applyFilter() и updateCount()

applyFilter();
updateCount();

// ===== автотест: не меняйте =====
{
  const q = (s) => document.querySelector(s);
  const items = () => [...document.querySelectorAll("#list li")];
  const visible = () => items().filter((li) => !li.hidden).length;
  const add = (text) => {
    q("#new-item").value = text;
    q("#add-form").dispatchEvent(new Event("submit", { cancelable: true }));
  };

  add("Лук");
  add("   ");
  add("лук");
  add("Зира");
  console.log("Всего: " + items().length);
  q('#list li:nth-child(1) [data-action="fav"]').click();
  q('#list li:nth-child(3) [data-action="fav"]').click();
  console.log("Избранных: " + document.querySelectorAll("#list li.fav").length);
  q('[data-filter="fav"]').click();
  console.log("В фильтре «Избранные»: " + visible());
  q('#list li:nth-child(1) [data-action="fav"]').click();
  console.log("После снятия: " + visible());
  q('[data-filter="all"]').click();
  q('#list li:nth-child(2) [data-action="remove"]').click();
  console.log("После удаления: " + items().length + ", видно " + visible());
  console.log("Поле очищено: " + (q("#new-item").value === ""));
  console.log(q("#count").textContent);
}

Всего: 4
Избранных: 2
В фильтре «Избранные»: 2
После снятия: 1
После удаления: 3, видно 3
Поле очищено: true
Всего: 3, избранных: 1

Что сдать

• Папку с index.html, style.css, script.js — ссылкой на репозиторий GitHub или архивом в Telegram-группу. Название темы напишите в сообщении.
• Скриншот работающего списка (с добавленными пунктами, включённым фильтром).
• Файл prompts.md (или раздел в README) с двумя вещами: (1) вашим баг-репортом для ИИ по шаблону из раздела 07 — по настоящему багу, который встретился вам; (2) одним абзацем: что подсказал ИИ и что из этого вы не взяли и почему.

Как оценим (0–10)

Бонус (по желанию, без баллов): двойной клик по названию меняет его, клавиша Escape очищает поле, Delete удаляет последнюю строку.