Назария

Формаҳо ва вогузорӣ

Формаҳо

Форма — ин <form> бо майдонҳо ва тугма аст. Вақте ки корбар тугма ё Enter-ро дар майдон пахш мекунад, ҳодисаи submit рух медиҳад, ва браузер бо пешфарз формаро мефиристад ва саҳифаро аз нав бор мекунад. Дар сайтҳои муосир инро қариб ҳамеша бекор мекунанд ва маълумотро дар JavaScript коркард мекунанд:

const form = document.querySelector("#signup");

form.addEventListener("submit", (e) => {
  e.preventDefault();               // бе бозборкунӣ
  const name = form.querySelector("#name").value.trim();
  console.log("Ба қайд мегирем", name);
  form.reset();                     // ҳамаи майдонҳои формаро тоза кардан
});

Маҳз ба submit дар форма гӯш диҳед, на ба click дар тугма: ҳамин тавр ҳам тугма ва ҳам Enter кор мекунанд.

Санҷиши майдонҳо

Пеш аз фиристодан маълумотро месанҷанд ва хаторо дар паҳлӯи майдон нишон медиҳанд:

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const age = Number(form.querySelector("#age").value);
  const error = form.querySelector(".error");
  if (!Number.isInteger(age) || age < 1 || age > 120) {
    error.textContent = "Синну сол — адади бутун аз 1 то 120";
    return;
  }
  error.textContent = "";
  console.log("Ҳама дуруст");
});

trim() фосилаҳоро дар канорҳо хориҷ мекунад — вагарна сатре, ки танҳо аз фосилаҳо иборат аст, санҷиши «холӣ нест»-ро мегузашт.

Болоравии ҳодисаҳо

Ҳодисае, ки дар элемент рух дод, баъд ба боло болоравӣ мекунад (bubbling): коркардкунандаҳои волид, волиди он ва ҳамин тавр то document кор мекунанд. Клик ба тугма дар дохили <div id="toolbar"> — ин ҳамчунин клик ба #toolbar ва ба body аст.

e.target — амиқтарин элементе, ки ҳама чиз аз он сар шуд, e.currentTarget бошад — он ки коркардкунандаи он ҳозир иҷро мешавад.

Вогузорӣ

Ба ҷои коркардкунанда дар ҳар яке аз сад тугма якто — ба волиди умумӣ — меовезанд ва дар он мебинанд, ки ба кадом тугма клик карданд:

document.querySelector("#menu").addEventListener("click", (e) => {
  const btn = e.target.closest("button");
  if (!btn) return;                 // берун аз тугмаҳо клик карданд
  console.log("Амал:", btn.dataset.action);
});

closest(селектор) элементи мувофиқи наздиктаринро ҷустуҷӯ мекунад, аз худи e.target сар карда ва ба боло баромада. Ин муҳим аст: агар дар дохили тугма <span> ё нишона бошад, e.target ҳамон мешавад, вале closest бо вуҷуди ин тугмаро меёбад.

Афзалиятҳои вогузорӣ:

як коркардкунанда ба ҷои бисёр;
элементҳое, ки баъдтар илова шудаанд (корҳои нав дар рӯйхат), худ ба худ кор мекунанд — коркардкунандаи онҳо аллакай дар волид аст;
пас аз render(), ки ҳамаи li-ҳоро аз нав месозад, ҳеҷ чизро аз нав обуна кардан лозим нест.

Ҳолат + render + вогузорӣ

Қариб ҳамаи интерфейсҳои хурд дар JavaScript-и тоза ҳамин тавр сохта шудаанд:

let items = [];                  // 1. маълумот — ягона манбаи ҳақиқат

function render() {              // 2. саҳифа танҳо аз маълумот сохта мешавад
  // тоза кардан ва элементҳоро аз рӯи items сохтан
}

list.addEventListener("click", (e) => {   // 3. ҳодисаҳо маълумотро иваз мекунанд…
  // элементро бо closest ёфтан, items-ро иваз кардан
  render();                               // …ва саҳифаро аз нав мекашанд
});

Ҳеҷ гоҳ чизи муҳимро «танҳо дар HTML» нигоҳ надоред (масалан, иҷро шудани кор — танҳо дар синфи элемент): пас аз аз нав кашидан он гум мешавад. Маълумот — дар массив, HTML — инъикоси он.

Хулоса

submit + e.preventDefault() — формаро бе бозборкунӣ коркард кардан, form.reset() — тоза кардан.
Ҳодисаҳо болоравӣ мекунанд: клик ба тугма ҳамчунин клик ба ҳамаи волидони он аст.
Вогузорӣ: як коркардкунанда дар волид + e.target.closest(...).
Маълумот дар тағйирёбандаҳо → render() саҳифаро месозад → ҳодисаҳо маълумотро иваз карда, render()-ро даъват мекунанд.