JavaScript funksiyalari yordamida hodisalarni qayta ishlash

JavaScript funksiyalari yordamida hodisalarni qayta ishlash

REJA:

1. 
   JavaScriptda hodisalarga kirish.
   
2. 
   Hodisalarni qayta ishlovchilar.
   
3. 
   Hodisa obyekti.
   
4. 
   Qayta ishlovchi obyekt: handleEvent.
   
5. 
   Xulosa.
   
6. 
   Foydalanilgan adabiyotlar.
   

JavaScriptda hodisalarga kirish

Hodisa - bu brauzer tomonidan biron bir narsa yuz berganligi haqidagi signal. Barcha DOM tugunlari bunday signallarni chiqaradi (garchi voqealar nafaqat DOMda sodir bo'lmasa ham).
Bu erda eng tez-tez ishlatiladigan DOM hodisalari ro'yxati:

• 
  Click – sichqonchaning chap tugmasini bosgnada sodir bo’ladi;
  
• 
  Contextmenu - sichqonchaning o’ng tugmasini elementga bosganda sodir bo’ladi;
  
• 
  Mouseover/mouseout – kursor ustiga kelganda / kursor element ustidan ketganda;
  
• 
  Mousedown/mouseup – sichqonchani bosganda va qo’yib yuborganda;
  
• 
  Mousemove – sichqonchani qo’zg’atganda sodir bo’ladigan hodisa.
  

Boshqaruv elemtlaridagi hodissalar:

• 
  Submit – foydalanuvhi forma jo’natganda;
  
• 
  Focus – foydalanuvchi elementga e’tiborini qaratganda, misol uchun elementini bosganda.
  

Klaviatura hodisalari:

• 
  Keydown va keyup - foydalanuvchi tugmachani bosganda / qo'yganda.
  

Hujjat hodisalari:

• 
  DOMContentLoaded - HTML yuklanganda va ishlov berilganda, hujjatning DOM-i to'liq qurilgan va undan foydalanish mumkin.
  

CSS hodisalar:

• 
  transitionend - CSS animatsiyasi tugashi bilan.
  

Hodisalarni qayta ishlovchilar

Hodisaga ishlov berish vositasi tayinlanishi mumkin, ya'ni hodisa ro'y berganda darhol ishga tushadigan funksiya.

Aynan JavaScript kodi foydalanuvchilarning harakatlariga javob qaytarishi mumkin.

Hodisaga qayta ishlov beruvchisini tayinlashning bir necha yo'li mavjud. Endi biz ularni eng oddiylaridan boshlab ko'rib chiqamiz.

HTML ATRIBUTI ORQALI

Element atributiga ‘on’ qo’shish orqali. Misol uchun click hodiasini input elementi ishlatsa bo’ladi:



Tugmani bosganingizda, onclick atributida ko'rsatilgan kod bajariladi.


HTML tegi atributi ko'p kodlarni yozish uchun qulay joy emas, shuning uchun alohida JavaScript funktsiyasini yaratib, u yerga murojaat qilish yaxshiroqdir.

Ushbu misolimiz quyonlarni sanash funksiyasini ishga tushiradi:

DOM-OBYEKT XUSUSIYATIDAN FOYDALANISH

DOM-elementi xususiyatlaridan foydalanib hodisani tayinlash mumkin. Misol uchun, elem.onclick:

HODISA OBYEKTI

Voqeani yaxshi boshqarish uchun sizga nima bo'lganligi haqida tafsilotlar kerak bo'lishi mumkin. Faqat "bosish" yoki "tugmachani bosish" emas, balki sichqoncha ko'rsatgichining qaysi koordinatalari, qaysi tugma bosilgan va hokazo.

Hodisa ro'y berganda, brauzer voqea ob'ekti yaratadi, unga tafsilotlarni yozadi va uni ishlov berish funktsiyasi uchun argument sifatida uzatadi.

Quyidagi misol voqea ob'ektidan sichqonchaning koordinatalarini olishni namoyish etadi:

Hodisa ob'ekti ba'zi ob'ektlari:

Event.type

Tadbir turi, bu holda "cherting".

event.currentTarget

Protsessor ishlov beriladigan element. Odatda bu qiymat bir xil bo'ladi, agar u boshqa ob'ektni bog'lash uchun bog'laydigan yordamchi strelka bo'lmasa, men event.currentTarget-dan elementni olishim mumkin.

event.clientX / event.clientY

Voqealar oynasini bosish paytida kursorning koordinatalari.

QAYTA ISHLOVCHI OBYEKT: handleEvent

Biz nafaqat ishlov beruvchiga funktsiyani, balki addEventListener-dan foydalanib ob'ektni ham tayinlashimiz mumkin. Bunday holda, voqea sodir bo'lganda, holdEvent ob'ekt usuli chaqiriladi.

Masalan:

Нажми меня

Ko'rinib turibdiki, agar addEventListener ob'ektni ishlov beruvchi sifatida qabul qilsa, hodisa ro'y berganda object.handleEvent (event) ni chaqiradi.

Buning uchun biz sinfdan ham foydalanishimiz mumkin:

Нажми меня

Bu erda bir xil ob'ekt ikkala hodisani ham boshqaradi. E'tibor bering, ikkala ishlov beruvchini addEventListener orqali aniq tayinlashimiz kerak. Keyin menyu ob'ekti mousedown va sichqonchani bosib o'tish hodisalarini oladi, ammo boshqa (tayinlanmagan) hodisalar turlarini.

HandEvent usuli barcha ishlarni o'zi bajarishi shart emas. Bu kabi hodisalarni muayyan turlarini boshqarish uchun moslashtirilgan boshqa usullarni chaqirish mumkin:

Нажми меня

Endi hodisalarni qayta ishlash kodlarni qo'llab-quvvatlashni soddalashtiradigan usullarga bo'linadi.

XULOSA

Hodisalarni boshqaruvchilarni tayinlashning uchta usuli mavjud:

HTML atributi: onclick = "...".

DOM xususiyati: elem.onclick = funktsiya.

Maxsus usullar: qo'shish uchun elem.addEventListener (voqea, ishlov beruvchi [, faza]), olib tashlash uchun o'chirishEventListener.

HTML atributlari kam ishlatiladi, chunki HTML yorlig'idagi JavaScript biroz g'alati ko'rinadi. Bundan tashqari, siz u erda ko'p kod yozolmaysiz.

DOM xususiyatlaridan foydalanish mumkin, ammo biz bir xil hodisaga bittadan ortiq ishlov beruvchini tayinlay olmaymiz. Ko'p hollarda, ushbu cheklovga yo'l qo'yilishi mumkin.

Ikkinchi usul eng moslashuvchan, ammo kodning ko'p qismini yozishingiz kerak. Faqatgina u orqali ishlaydigan bir nechta turdagi tadbirlar mavjud, masalan, o'tish va DOMContentLoaded. AddEventListener shuningdek ob'ektlarni tadbirlarni boshqaruvchisi sifatida qo'llab-quvvatlaydi. Bunday holda, holdEvent ob'ekt usuli chaqiriladi.

Ishlov beruvchini qanday tayinlashingizdan qat'iy nazar, u voqea ob'ektini o'zining birinchi dalili sifatida qabul qiladi. Ushbu ob'ektda nima bo'lganligi haqida tafsilotlar mavjud.

FOYDALANILGAN ADABIYOTLAR

1. 
   https://learn.javascript.ru/introduction-browser-events#itogo
   
2. 
   https://developer.mozilla.org/ru/docs/Learn/JavaScript/Building_blocks/%D0%A1%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D1%8F
   
3. 
   W3schools.com
   
4. 
   Ma’ruza matnlari.