Назария

Ҳодисаҳо

Саҳифа ба амалҳо ҷавоб медиҳад

Ҳама чизи интерактивӣ дар сайтҳо — тугмаҳо, менюҳо, майдонҳои ҷустуҷӯ, бозиҳо — якхела сохта шудаанд: код ба ҳодиса обуна мешавад («вақте ки ин тугмаро клик мекунанд…») ва мегӯяд, ки он гоҳ кадом функсияро даъват кардан лозим. Худи код ҳеҷ чизро интизор намешавад: барнома тамом мешавад, функсия-коркардкунанда бошад баъдтар, вақте ки ҳодиса рух медиҳад, кор мекунад.

addEventListener

const btn = document.querySelector("#hello");

btn.addEventListener("click", () => {
  console.log("Тугмаро пахш карданд!");
});

Аргументи аввал — номи ҳодиса, дуюм — функсия-коркардкунанда (handler). Онро худатон даъват намекунед (бе ()): браузер онро ҳангоми ҳар клик даъват мекунад. Ҳар қадар хоҳед обуна шудан мумкин аст — ҳамаи коркардкунандаҳо бо тартиб кор мекунанд.

Ҳодисаҳои маъмул:

Ҳодиса	Кай
`click`	клики муш ё ламс
`input`	қимати майдон тағйир ёфт (ҳар ҳарф)
`change`	майдонро тағйир доданд ва аз он баромаданд; интихоб дар `select`, чекбокс
`submit`	фиристодани форма (Enter ё тугма)
`keydown` / `keyup`	тугма пахш шуд / раҳо шуд
`mouseenter` / `mouseleave`	муш ба элемент даромад / баромад
`focus` / `blur`	майдон фокусро гирифт / гум кард

Усули кӯҳна ҳам вомехӯрад — btn.onclick = () => {...}. Элемент метавонад танҳо як чунин функсия дошта бошад, нав кӯҳнаро нест мекунад, бинобар ин addEventListener беҳтар аст.

Ҳолат байни ҳодисаҳо

Коркардкунанда бисёр маротиба даъват мешавад, маълумоти байни даъватҳоро дар тағйирёбандаи берун аз коркардкунанда нигоҳ медоранд:

let likes = 0;
const likeBtn = document.querySelector("#like");
likeBtn.addEventListener("click", () => {
  likes++;
  likeBtn.textContent = `♥ ${likes}`;
});

Агар let likes = 0-ро дар дохили тирча эълон кунем, ҳисоб ҳангоми ҳар клик аз нав сар мешуд.

Объекти ҳодиса

Браузер ба коркардкунанда объекти ҳодисаро бо тафсилот медиҳад — одатан онро e ё event меноманд:

document.querySelector("#box").addEventListener("click", (e) => {
  console.log(e.type);           // "click"
  console.log(e.target);         // элементе, ки ба он клик карданд
  console.log(e.clientX, e.clientY);  // координатаҳои муш дар равзана
});

e.target — элементе, ки ҳодиса дар он рух дод. Ин дар мавзӯи оянда лозим мешавад, вақте ки як коркардкунанда ба бисёр тугмаҳо хизмат мекунад.

Вориди матн

const search = document.querySelector("#search");
search.addEventListener("input", () => {
  console.log("Ҷустуҷӯ:", search.value);
});

input ба ҳар аломат кор мекунад — ҷустуҷӯи «зинда» ва ҳисобкунакҳои аломатҳоро ҳамин тавр месозанд. change — вақте ки корбар тамом кард ва аз майдон баромад; барои <select> ва чекбоксҳо он дарҳол ҳангоми интихоб кор мекунад.

Клавиатура

Пахш кардани тугмаҳоро дар document (ё дар майдони воридкунӣ) гӯш мекунанд. Кадом тугма — дар e.key:

document.addEventListener("keydown", (e) => {
  if (e.key === "Enter") console.log("Вуруд");
  if (e.key === "ArrowUp") console.log("Тирчаи боло");
  if (e.key === " ") console.log("Фосила");
  if (e.ctrlKey && e.key === "s") console.log("Ctrl+S");
});

Номҳо: ҳарфҳо — "a", "B"; тирчаҳо — "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"; "Enter", "Escape", "Shift", " " (фосила).

Бекор кардани амали браузер

Баъзе ҳодисаҳо амали пешфарз доранд: истинод ба саҳифаи дигар мебарад, форма саҳифаро аз нав бор мекунад, фосила онро варақ мезанад. e.preventDefault() онро бекор мекунад:

document.querySelector("a.no-go").addEventListener("click", (e) => {
  e.preventDefault();
  console.log("Ба ҳеҷ ҷо намеравем");
});

Бекор кардани обуна

Барои он ки коркардкунанда дигар кор накунад, онро бо removeEventListener хориҷ мекунанд — бо ҳамон функсия, бинобар ин онро дар тағйирёбанда нигоҳ доштан лозим:

const onClick = () => console.log("клик");
btn.addEventListener("click", onClick);
btn.removeEventListener("click", onClick);

// Ё дарҳол: танҳо як маротиба кор кунад
btn.addEventListener("click", () => console.log("клики аввал"), { once: true });

Хулоса

el.addEventListener("ҳодиса", функсия) — обуна; функсияро медиҳем, на даъват мекунем.
Маълумоти байни ҳодисаҳо — дар тағйирёбандаҳои берун аз коркардкунанда.
e.target — дар куҷо рух дод, e.key — кадом тугма, e.preventDefault() — бекор кардани амали браузер.
input — ҳар тағйири майдон, change — тағйири анҷомёфта, keydown — пахш кардани тугма.