Javascriptda voqealar tizimi(events)

JavaScript voqealari

Voqealar xususiyatlaridan foydalanish

Keling, quyidagi misolda bo’lgani kabi, veb-sahifalarning turli xil tugmalar bo’lgan foydalanuvchi o’zaro ta’siriga qanday munosabatda bo’lishini bilib olaylik.

Veb-sahifani avtomatik ravishda belgilar sonini hisoblash uchun biror narsa yozing.

Veb-sahifalar voqealar tufayli foydalanuvchi o’zaro ta’siriga qachon munosabatda bo’lishni biladi. Biz allaqachon kodimizda hodisadan foydalandik.

Har safar onclick atributiga ega tugmachani bosganimizda, funksiya chaqiruvini ishga tushirish uchun hatto bosishdan foydalanardik.

HTML hodisasi atributlaridan foydalanish oson, lekin ular biroz eskirgan va kattaroq kod boʻlaklarini boshqarish qiyinroq.

Atributlar HTMLni boshqarish va hatto quyida keltirilgan qisqa kod uchun ham o’qishni qiyinlashtiradi.

Hodisalarni qo’shishning yanada barqaror usuli — bu hodisa xususiyatlari.

Xususiyatga ega bo’lganimizdan so’ng, biz = va funksiya nomini qavssiz qo’shish orqali funktsiyani chaqirishimiz mumkin.

Hodisa ishga tushirilgandan so’ng chaqiriladigan funksiya hodisa ishlov beruvchisi deb ataladi.

Biz ushbu turdagi funktsiyalar ichida hodisa qanday o’tkazilishini xohlayotganimizni aniqlaymiz.

Hodisa xususiyatlarini o’rganish

Keling, veb-sahifaning boshqa hodisalarini ko’rib chiqaylik, masalan, kirish elementida nima yozganimizni o’zgartirganimizda ishga tushadi.

Agar xohlasak, hodisalarni boshqa elementlar turlariga qo’shishimiz mumkin.

Element qanday ishlashini xohlayotganimizga qarab, biz boshqa hodisa qo’shishni xohlashimiz mumkin.

Agar foydalanuvchi veb-sahifani aylantirganda hodisani ishga tushirmoqchi bo’lsak, biz onscroll xususiyatidan foydalanishimiz mumkin.

Agar kirish maydoni o’z qiymatini o’zgartirganda hodisani ishga tushirmoqchi bo’lsak, onchange xususiyatidan foydalanishimiz mumkin.

Agar biror elementning kiritilishi o’zgarganda hodisani ishga tushirishni istasak, biz oninput xususiyatidan foydalanamiz.

Voqealarni usullar bilan qo’shish

Keling, bir hodisaga bir nechta hodisa ishlov beruvchilarini qo’shish imkonini beradigan elementlarga hodisalar qo’shishning yangi usulini bilib olaylik.

Elementlarga hodisalar qo’shishning zamonaviy usuli addEventListener() usulidir.

Usulni qo’shganimizdan so’ng, biz o’zgartirmoqchi bo’lgan voqea nomini, keyin vergul va chaqirmoqchi bo’lgan funksiyani qo’shamiz.

Voqealarni qo’shish yoki o’chirish usullaridan foydalanganda biz xususiyat nomlaridan emas, balki hodisa nomlaridan foydalanamiz.

Shuningdek, biz voqealarni removeEventListener() usuli bilan olib tashlashimiz mumkin.

Agar biz voqea faqat bir marta sodir bo’lishini xohlasak, elementlarni olib tashlash foydali bo’ladi.

Voqealarni usullar yordamida qo’shish, agar biz bir xil hodisa triggeriga bir nechta hodisa ishlov beruvchilarini qo’shmoqchi bo’lsak, foydali bo’lishi mumkin.

Voqealar ga teging. Sensorli qurilmalar bo`yicha

Foydalanuvchilar harakatni boshlashi mumkin bo’lgan veb-sahifaga teginish hodisalarini qo’llashni o’rganamiz.

Biz foydalanuvchining veb-sahifa elementi bilan o’zaro aloqada bo’lganligini aniqlash uchun sensorli hodisalardan foydalanamiz va keyin ma’lum bir amalni bajarish uchun funksiyadan foydalanamiz.

Foydalanuvchilar element bilan o’zaro aloqa qilishni boshlagan yoki yo’qligini tekshirmoqchi bo’lganimizda, biz sensorli ishga tushirish hodisasidan foydalanamiz.

Agar foydalanuvchi uzoq vaqt davomida biror element bilan o’zaro aloqada bo’lganligini aniqlashni istasak, biz touchmove hodisasidan foydalanamiz.

Foydalanuvchi element bilan o’zaro aloqani to’xtatganligini tekshirish uchun biz sensorli hodisadan foydalanamiz.

Nihoyat, sensorli bekor qilish hodisasi yordamida sensorli hodisa uzilib qolganligini tekshirish yaxshi kodlash amaliyotidir.

Sensorni bekor qilish kodini kiriting va keyin tasvirga tegayotganda teginish hodisasini to’xtatish uchun barmog’ingizni ekrandan suring. va mo`jiza eventimiz bajarildi..

#js

@ozbekdasturchi