JavaScript hodisalar (event, addEventListener)

Shu paytgacha kod bir marta, yuqoridan pastga bajarildi. Endi uni foydalanuvchi harakatiga bog’laymiz: tugma bosilganda, matn kiritilganda, forma yuborilganda.

addEventListener

JavaScript

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

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

console.log("Tinglovchi o'rnatildi");

Sahifa

Ishga tushirgach, natija oynasidagi tugmani bir necha marta bosing — har bosishda yangi xabar chiqadi.

Tuzilishi: element.addEventListener("hodisa", funksiya). Funksiya hodisa sodir bo’lganda chaqiriladi.

Sanagich misoli

JavaScript

let n = 0;
const hisob = document.querySelector("#hisob");

document.querySelector("#tugma").addEventListener("click", () => {
n++;
hisob.textContent = n;
});

console.log("Tugmani bosib ko'ring");

Sahifa

n o’zgaruvchisi tinglovchidan tashqarida e’lon qilingan — shuning uchun qiymati bosishlar orasida saqlanib qoladi.

event obyekti

Tinglovchi funksiya hodisa haqidagi ma’lumotni oladi:

JavaScript

function bosildi(e) {
console.log("Bosilgan:", e.target.textContent);
console.log("ID:", e.target.id);
console.log("Turi:", e.type);
}

document.querySelector("#a").addEventListener("click", bosildi);
document.querySelector("#b").addEventListener("click", bosildi);

console.log("Ikkala tugmani bosing");

Sahifa

e.target — hodisa qaysi elementda sodir bo’lganini beradi. Shu sababli bitta funksiyani bir necha elementga ulash mumkin.

Ko’p uchraydigan hodisalar

Hodisa	Qachon sodir bo’ladi
`click`	element bosilganda
`input`	maydonga yozilganda (har harfda)
`change`	qiymat o’zgarib, fokus ketganda
`submit`	forma yuborilganda
`keydown`	klavisha bosilganda
`mouseover`	sichqoncha element ustiga kelganda

input — jonli kiritish

JavaScript

const maydon = document.querySelector("#maydon");
const natija = document.querySelector("#natija");

maydon.addEventListener("input", (e) => {
natija.textContent = e.target.value.toUpperCase();
});

console.log("Maydonga yozib ko'ring");

Sahifa

input hodisasi har bir harfda ishlaydi, e.target.value esa maydondagi joriy matnni beradi.

preventDefault — odatiy xatti-harakatni to’xtatish

Ba’zi elementlarning tug’ma xatti-harakati bor: havola sahifani almashtiradi, forma sahifani qayta yuklaydi. Uni to’xtatish mumkin:

JavaScript

document.querySelector("#havola").addEventListener("click", (e) => {
e.preventDefault();
console.log("Havola bosildi, lekin o'tilmadi");
});

console.log("Havolani bosing");

Sahifa

Bu forma bilan ishlashda ayniqsa muhim — keyingi darsda ko’ramiz.

Tinglovchini olib tashlash

JavaScript

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

function birMarta() {
console.log("Bajarildi!");
tugma.removeEventListener("click", birMarta);
}

tugma.addEventListener("click", birMarta);
console.log("Tugmani ikki marta bosing");

Sahifa

Buning uchun funksiya nomlangan bo’lishi shart — arrow funksiyani o’chirib bo’lmaydi, chunki unga havola saqlanmaydi.

Soddaroq yo’l — { once: true } sozlamasi:

tugma.addEventListener("click", () => {
  console.log("Bir marta");
}, { once: true });

Amaliy mashq

Interaktiv sahifa yarating:

Tugma qo’shib, bosilganda xabar chiqaring;
sanagich yasang — har bosishda son ortsin;
“Kamaytirish” tugmasini ham qo’shing;
input maydonidan matnni olib, sahifada ko’rsating;
e.target orqali qaysi tugma bosilganini aniqlang;
havolaga preventDefault qo’llang.

2-qadamda let n = 0 ni tinglovchi ichiga ko’chiring — nima o’zgaradi?

Qisqacha xulosa

addEventListener("hodisa", funksiya) — hodisani tinglaydi.
event obyekti hodisa haqida ma’lumot beradi; e.target — manba element.
Asosiy hodisalar: click, input, change, submit, keydown.
e.preventDefault() odatiy xatti-harakatni to’xtatadi.
removeEventListener yoki { once: true } bilan tinglovchi olib tashlanadi.

Keyingi darsda formalar — foydalanuvchi kiritgan ma’lumotni olish va tekshirishni ko’ramiz.