JavaScript Event

Hodisalar (event) — foydalanuvchining harakatiga javob berish mexanizmi. Aynan hodisalar JavaScript’ni internetning tili qiladi: tugma bosilganda, maydon to’ldirilganda, sichqoncha harakatlanganda — dastur bularni “eshitadi” va javob beradi. Statik sahifani jonli ilovaga aylantiradigan narsa — bu hodisalar.

Hodisa (event) — sahifada sodir bo’ladigan harakat: bosish (click), matn kiritish, sahifa yuklanishi va h.k. JavaScript bu hodisalarga funksiya biriktirib, ularga javob beradi.

Keng tarqalgan hodisalar

Amaliyotda eng ko’p uchraydigan hodisalarni jadvalda ko’rib chiqamiz:

onclick — bosishga javob

Eng oddiy usul — HTML elementga to’g’ridan-to’g’ri hodisa biriktirish. Bosilganda funksiya chaqiriladi:

function salomBer() {
    console.log("Tugma bosildi, salom Farrux!");
}

Bu funksiya HTML’da <button onclick="salomBer()">Bosing</button> tarzida ulanadi. Foydalanuvchi tugmani bosganda salomBer ishga tushadi va konsolga xabar chiqadi. Bu — hodisaga javob berishning eng sodda shakli.

addEventListener — zamonaviy usul

Professional loyihalarda hodisa addEventListener orqali biriktiriladi. Bu HTML’ni JavaScript’dan ajratib, kodni toza saqlaydi:

const tugma = document.getElementById("tugma");
tugma.addEventListener("click", function() {
    console.log("Salom, UzbekDevs!");
});

Salom, UzbekDevs!

Bu kod id="tugma" bo’lgan elementni topib, unga “click” hodisasini tingladi. Tugma bosilganda ichkaridagi funksiya bajariladi. addEventListener ning afzalligi — bitta elementga bir necha hodisa biriktirish mumkin.

Bir necha hodisani boshqarish

addEventListener bilan turli hodisalarni alohida boshqarish mumkin:

const maydon = document.getElementById("kiritish");
maydon.addEventListener("keydown", function() {
    console.log("Tugma bosilmoqda");
});
maydon.addEventListener("focus", function() {
    console.log("Maydon faollashdi");
});

Bu yerda bitta maydonga ikki hodisa biriktirildi: keydown (tugma bosilganda) va focus (maydon faollashganda). Har biri o’z funksiyasini ishga tushiradi. Bunday nozik boshqaruv interaktiv formalarda juda muhim.

Xulosa

Bu bo’limda hodisalar tushunchasini, keng tarqalgan hodisa turlarini, onclick bilan oddiy va addEventListener bilan zamonaviy usulda hodisaga javob berishni ko’rib chiqdik. Hodisalar — foydalanuvchi bilan ilova o’rtasidagi jonli aloqa. Keyingi darsda satrlar — matn bilan ishlashga o’tamiz.