DOM — addEventListener, removeEventListener, event ob'ekti

~20 daq · JavaScript · Brauzer API lari

Muammodan boshlaylik

Sahifadagi elementlar foydalanuvchi bilan "muloqot" qilishi kerak. Tugma bosildi — biror narsa bo'lsin. Matn maydoniga yozildi — tekshirilsin. Sichqon element ustiga keldi — ko'rinish o'zgarsin.

Bu "muloqot" mexanizmi — hodisalar (events). Foydalanuvchi nima qilsa, brauzer JavaScript ga xabar beradi. JavaScript xabarni eshitib, tegishli ish bajaradi.

addEventListener — hodisani tinglash

addEventListener — elementga "tinglash qulog'i" qo'yish. Hodisa yuz berganda — berilgan funksiya chaqiriladi.

const tugma = document.querySelector("#yuborish");

tugma.addEventListener("click", function() {
  console.log("Tugma bosildi!");
});

Hayotiy o'xshatma

Eshik qo'ng'irog'i. Eshikni o'rnatib, qo'ng'iroq ulab qo'ydingiz. Kimdir qo'ng'iroq bosganida — siz eshikka borasiz. Eshik doimo o'sha yerda, qo'ng'iroq esa hodisa eshitilganda signal beradi.

addEventListener — o'sha qo'ng'iroqni o'rnatish. "Bu element da bu hodisa bo'lsa — shu funksiyani chaqir."

Event ob'ekti — hodisa haqida ma'lumot

Hodisa yuz berganda, brauzer funksiyaga event ob'ekti uzatadi. Bu ob'ektda hodisa haqida barcha ma'lumot bor: qaysi element bosildi, qayerda bosildi, qaysi tugma bosildi va hokazo.

tugma.addEventListener("click", function(event) {
  console.log(event.type);   // "click" — hodisa turi
  console.log(event.target); // bosilgan element
});

Klaviatura hodisalarida

const input = document.querySelector("input");

input.addEventListener("keydown", function(event) {
  console.log(event.key);     // "Enter", "a", "Backspace" — bosilgan tugma
  console.log(event.code);    // "KeyA", "Enter" — fizik tugma kodi
  console.log(event.ctrlKey); // true/false — Ctrl bosilganmi?
  console.log(event.shiftKey); // true/false — Shift bosilganmi?
});

Sichqon hodisalarida

document.addEventListener("mousemove", function(event) {
  console.log(event.clientX, event.clientY); // sichqon koordinatasi
});

event.target — hodisa qaysi elementda?

event.target — hodisa haqiqatda yuz bergan element. Bu ayniqsa bir nechta elementni tinglashda muhim.

document.querySelector("ul").addEventListener("click", function(event) {
  console.log(event.target); // bosilgan li elementi — ul emas
  console.log(event.target.textContent); // o'sha li ning matni
});

event.preventDefault — standart xulqni to'xtatish

Ba'zi elementlarning standart xulqi bor:

• <a> bosilsa — boshqa sahifaga o'tadi
• <form> yuborilsa — sahifa yangilanadi
• <input type="checkbox"> bosilsa — belgilanadi/olib tashlanadi

event.preventDefault() — bu standart xulqni to'xtatadi.

Hayotiy o'xshatma

Lift tugmasi. Tugmani bosganingizda lift o'z-o'zidan ketmoqchi. Lekin siz "to'xta, men boshqa qavatga borishni xohlayman" deb to'xtatdingiz — o'z manzilingizni kiritdingiz. preventDefault — o'sha to'xtatish.

const forma = document.querySelector("form");

forma.addEventListener("submit", function(event) {
  event.preventDefault(); // ← sahifa yangilanmaydi

  const ism = document.querySelector("#ism").value;
  if (!ism) {
    alert("Ism kiritilmagan!");
    return;
  }
  serverGaYuborish(ism); // ← o'z logikamiz
});

const havola = document.querySelector("a.modal-ochish");

havola.addEventListener("click", function(event) {
  event.preventDefault(); // ← boshqa sahifaga o'tmaslik
  modalniOchish();
});

removeEventListener — tinglashni to'xtatish

addEventListener bilan qo'shilgan funksiyani olish ham mumkin.

function bosishHandler() {
  console.log("Bosildi");
}

tugma.addEventListener("click", bosishHandler);

// Keyinchalik — tinglashni to'xtatish:
tugma.removeEventListener("click", bosishHandler);

Nima uchun funksiya alohida e'lon qilinadi?

removeEventListener — aynan o'sha funksiyani olishi kerak. Arrow function yoki anonim funksiya har safar yangi ob'ekt — ularni olib bo'lmaydi.

// ❌ — arrow function har safar yangi, olib bo'lmaydi
tugma.addEventListener("click", () => console.log("bosildi"));
tugma.removeEventListener("click", () => console.log("bosildi")); // ishlamaydi!

// ✅ — nomlangan funksiya — bir xil reference
function handler() { console.log("bosildi"); }
tugma.addEventListener("click", handler);
tugma.removeEventListener("click", handler); // ✅ ishlaydi

Qachon kerak?

Bitta marta ishlashi kerak bo'lgan hodisa — birinchi marta ishlangach, tinglash to'xtatiladi:

function birMartalik() {
  console.log("Faqat bir marta!");
  tugma.removeEventListener("click", birMartalik); // o'zini olib tashladi
}

tugma.addEventListener("click", birMartalik);

Yoki { once: true } opsiyasi bilan — avtomatik:

tugma.addEventListener("click", function() {
  console.log("Faqat bir marta!");
}, { once: true }); // ← birinchi marta ishlagach, avtomatik olinadi

Ko'p ishlatiladigan hodisalar

Tez-tez uchraydigan xatolar

Anonim funksiya — removeEventListener ishlamaydi:

// ❌ — olib bo'lmaydi
el.addEventListener("click", function() { console.log("x"); });
el.removeEventListener("click", function() { console.log("x"); }); // yangi ob'ekt!

// ✅
const fn = function() { console.log("x"); };
el.addEventListener("click", fn);
el.removeEventListener("click", fn);

this arrow function da yo'qolishi:

const tugma = document.querySelector("button");

// ❌ — arrow function da this = window (yoki undefined)
tugma.addEventListener("click", () => {
  console.log(this); // window, tugma emas
});

// ✅ — oddiy funksiyada this = bosilgan element
tugma.addEventListener("click", function() {
  console.log(this); // <button> elementi
  this.classList.add("bosildi");
});

DOMContentLoaded ni unutish:

JavaScript <head> da bo'lsa va DOM hali yuklanmagan bo'lsa — querySelector null qaytaradi.

// ❌ — script head da, DOM hali yo'q
const tugma = document.querySelector("#tugma"); // null

// ✅ — DOM tayyor bo'lganda ishlash
document.addEventListener("DOMContentLoaded", function() {
  const tugma = document.querySelector("#tugma"); // endi mavjud
  tugma.addEventListener("click", fn);
});

Xulosa

addEventListener(hodisa, fn) — hodisani tinglash. Hodisa bo'lganda funksiya chaqiriladi.

Event ob'ekti — hodisa haqida ma'lumot: event.type, event.target, event.key, event.clientX/Y.

event.preventDefault() — standart xulqni to'xtatish: forma yuborishni, havolaga o'tishni.

removeEventListener — tinglashni to'xtatish. Faqat nomlangan funksiya bilan ishlaydi.

Keyingi dars

46-dars: DOM — Event Bubbling, Capturing, Delegation