Ҳодисаҳо

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».
• Тозагӣ. Дар HTML onclick="…" нест. Ба ҳар 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 сатри охиринро нест мекунад.