JavaScript үндэс / Үйл явдал (Events)

Үйл явдал (Events)

Хэрэглэгч товч дарах, хулгана хөдлөх, текст бичих — эдгээр бүгд event юм. JavaScript event-д хариулж ажиллах функц бичихэд addEventListener ашиглана. Энэ л вэб хуудасны "амьд" байдлын нууц.

addEventListener үндэс

addEventListener нь гурван зүйлийг мэдэх хэрэгтэй: хаана (элемент), юу болоход (event төрөл), юу хийх (handler функц).

javascript
const товч = document.querySelector("#товч");

товч.addEventListener("click", function () {
  console.log("Товч дарагдлаа!");
});

Arrow функц ашиглавал:

javascript
товч.addEventListener("click", () => {
  console.log("Товч дарагдлаа!");
});

Хоёулаа ижил үр дүн гарна — arrow функц нь товч, уншигдахад хялбар.

Event объект

Handler функц автоматаар event объект хүлээн авдаг. Энд event-ийн талаарх бүх мэдээлэл байна — хаана дарсан, ямар товч, гэх мэт:

javascript
document.addEventListener("click", (event) => {
  console.log("Дарсан байрлал X:", event.clientX);
  console.log("Дарсан байрлал Y:", event.clientY);
  console.log("Дарсан элемент:", event.target);
});

event.target нь яг дарагдсан элементийг заана — энэ маш их хэрэгтэй.

Нийтлэг event төрлүүд

JavaScript-д арван гаруй event төрөл байна. Хамгийн түгээмэл хэрэглэгддэг нь:

javascript
const оролт = document.querySelector("#оролт");
const маягт = document.querySelector("#маягт");

// Хулганы event
товч.addEventListener("click", () => {
  /* дарагдах */
});
товч.addEventListener("mouseover", () => {
  /* хулгана орох */
});
товч.addEventListener("mouseout", () => {
  /* хулгана гарах */
});

// Текстийн event
оролт.addEventListener("input", (e) => {
  console.log("Бичигдэж байна:", e.target.value);
});
оролт.addEventListener("focus", () => {
  /* фокус орох */
});
оролт.addEventListener("blur", () => {
  /* фокус гарах */
});

// Маягтын event
маягт.addEventListener("submit", (e) => {
  e.preventDefault(); // Хуудас шинэчлэгдэхийг зогсоох
  console.log("Маягт илгээгдлээ");
});

Event delegation

100 товч бүрт addEventListener нэмэхийн оронд эцэг элементэд нэг listener нэмж болно. event.target ашиглан аль товч дарагдсаныг тодорхойлно:

javascript
const жагсаалт = document.querySelector("#даалгавар-жагсаалт");

жагсаалт.addEventListener("click", (event) => {
  // Зөвхөн .устгах товч дарагдсан бол
  if (event.target.classList.contains("устгах")) {
    const мөр = event.target.parentElement;
    мөр.remove();
    console.log("Даалгавар устгагдлаа");
  }
});

Энэ загвар нь динамикаар нэмэгдсэн шинэ элементүүдэд ч ажиллана — тиймд event delegation маш чухал арга.

Нэг удаагийн event

{ once: true } тохируулбал event нэг удаа ажиллаад автоматаар устана:

javascript
товч.addEventListener(
  "click",
  () => {
    console.log("Зөвхөн нэг удаа ажиллана");
  },
  { once: true },
);

removeEventListener

Нэмсэн listener-г дараа нь устгаж болно. Устгахын тулд функцийг тусад нь нэрлэсэн байх ёстой:

javascript
function товч дарагдав() {
  console.log("Дарагдлаа!");
}

товч.addEventListener("click", товч дарагдав);

// Хожим устгах
товч.removeEventListener("click", товч дарагдав);

Anonymous функц () => {} хэлбэрээр нэмсэн бол устгаж болдоггүй — тиймд устгах шаардлагатай listener-уудыг нэрлэж бич.

Keyboard event

Гарын товч дарахыг мэдэхэд keydown ашиглана:

javascript
document.addEventListener("keydown", (event) => {
  console.log("Дарагдсан товч:", event.key);

  if (event.key === "Enter") {
    console.log("Enter дарлаа");
  }

  if (event.ctrlKey && event.key === "s") {
    event.preventDefault(); // Хөтчийн хадгалахыг зогсоох
    console.log("Хадгалж байна...");
  }
});

Дараагийн хичээлд:

Маягт (form) ба баталгаажуулалт — оролтын утгыг авах, шалгах, алдааны мэдэгдэл харуулах бодит жишээ. Events-ийн мэдлэгтэй хослуулж бүрэн маягт бичиж сурна.

← Өмнөх хичээлЭлемент өөрчлөхДараах хичээл →Маягт ба баталгаажуулалт