JavaScript-ning dinamik yaratish qobiliyati html sahifalar uchta ustunga asoslanadi. Ulardan ikkitasi allaqachon oldingi maqolalarda muhokama qilingan. Uchinchisi - voqealar.

• Oyna obyekti yordamida brauzer oynalarini boshqarish.
• Oyna ichidagi ob'ektlarni boshqarish - bu DOM.
• Hodisalarda JavaScript kodini bajaring.

Hodisa – kompyuterning foydalanuvchi harakatiga munosabati. Masalan, t.z. bilan. JavaScript hodisasi deb klaviatura tugmachasini bosish, sichqoncha tugmachalarining harakatlanishi va bosilishi, brauzer oynasining yopilishi tushuniladi. t.z bilan barcha tadbirlar. javaScript hujjat va brauzer ob'ektlari tomonidan yaratilgan ("foydalanuvchi" tushunchasi yo'q). Masalan, paragrafni bosganingizda sichqonchani bosish hodisasi ob'ekt - paragraf tomonidan hosil bo'ladi.

Hodisalarga javob beradigan ba'zi JavaScript kodlarini ishga tushirish uchun siz ushbu kodni ma'lum bir ob'ektdan yaratilgan hodisa bilan bog'lashingiz kerak, ya'ni. muayyan ob'ektdan ma'lum bir hodisa bilan. Ushbu harakat hodisaga obuna bo'lish deb ataladi.

Obuna funksiyani brauzer ob'ekt modelidagi ma'lum bir ob'ektdan ma'lum bir hodisaga bog'lashimizni anglatadi. Va bu ob'ekt ushbu hodisani yaratganda (yaratganda), bu funksiya avtomatik ravishda ishlaydi.

• onclick - sichqoncha tugmachasini bosish.
• ondblclick - sichqoncha tugmasini ikki marta bosish.
• onmousedown - sichqoncha tugmasi bosiladi (pastga suriladi).
• onmousemove - sichqonchani ob'ekt ustida harakat qiladi (ko'p hodisalar sodir bo'ladi, sichqoncha harakati 1px = 1 hodisa).
• onmouseout - sichqoncha ob'ektni tark etadi.
• onmouseover - sichqoncha kerakli ob'ekt ustida harakatlanadi.
• onmouseup - sichqoncha tugmasi qo'yib yuboriladi (yuqoriga ko'tariladi).
• onkeydown - klaviatura tugmasi bosiladi (pastga suriladi).
• onkeypress - klaviatura tugmachasini bosish.
• onkeyup - klaviatura tugmasi qo'yib yuboriladi (yuqoriga ko'tariladi).
• onblur - kirish fokusining yo'qolishi (miltillovchi kursor).
• onfocus - kirish fokusini ushbu element qabul qilish vaqti.
• onchange - agar matn o'zgargan bo'lsa (masalan, matn maydonida) diqqatni yo'qotgandan keyin boshqaruv tomonidan yaratilgan. Istisno "tanlash" ro'yxati elementi bo'lib, unda bu hodisa diqqatni yo'qotgandan keyin emas, balki darhol yaratiladi.
• yuklash - sahifa oynada yuklashni tugatgandan so'ng hosil bo'ladi. Odatda sahifa toʻliq yuklangandan soʻng JavaScript kodini ishga tushirish kerak boʻlganda foydalaniladi.
• onunload - hujjat oynadan tushirilishidan oldin (ya'ni, biz ushbu hujjatni yopganimizda yoki boshqa hujjatga o'tganimizda) sodir bo'ladi.
• qayta o'rnatish - shakl qayta o'rnatildi.
• onsubmit - ma'lumotlar shakli topshirildi.

Tadbirlarga obuna bo'ling

• JavaScript orqali obuna. Bu usul ko'p hollarda qo'llaniladi. Birinchidan, biz obuna bo'lmoqchi bo'lgan elementning ob'ektini topishimiz kerak, masalan, getElementById usuli orqali (kerakli elementga identifikatorni ko'rsating).

funktsiya myFunc () ( //oddiy funktsiya ogohlantirishini yaratdi ("salom"); ) funksiya pageInit () ( var p= hujjat. getElementById ("1"); p. onclick= myFunc; ) //funktsiyani ishga tushirishga chaqirdi oyna hodisasi. onload=pageInit; //sahifa yuklanganda hodisa ishga tushadi< p id= 1 >1-xat // paragraf uchun identifikatorni o'rnating

• orqali obuna bo'ling html kodi. Bu usulning kamchiligi shundaki, html kod javaScript kodi bilan tiqilib qolgan; Bundan tashqari, bir nechta cheklovlar mavjud va murakkab holatlarda foydalanish noqulay.

< script type= "text/javascript" >funktsiya myFunc () ( //oddiy funktsiya ogohlantirishini yaratdi ("salom"); )< p onclick= "myFunc()" >2-band //Funktsiya Voqealarni qayta ishlash modeli deb ataladi

Elementda voqea sodir bo'lganda, shunga o'xshash hodisalar uning barcha asosiy elementlarida sahifaning eng yuqori qismigacha ("tana" gacha, chunki u hujjatning asosiy maydoni) sodir bo'lishi kerak. Shuning uchun, sahifada sodir bo'lgan har qanday hodisa tanada sodir bo'ladi.

Shunda savol tug'iladi, bunday hodisalar qanday tartibda sodir bo'ladi? Zamonaviy brauzerlarda hodisalarni boshqarish modeli "qabariq modeli" deb ataladi. Uning mohiyati: birinchidan, voqea bosilgan elementda, so'ngra uning ota-onasida va hokazo eng yuqoriga - "tana" ga qadar sodir bo'ladi.

Element --> element 2 --> hujjat --> oyna

Voqea parametrlari (voqea obyekti)

Ko'p xususiyatlarga ega bo'lgan hodisa ob'ekti mavjud. Ushbu xususiyatlarni o'qib, siz voqealar haqida ma'lumot olishingiz mumkin. Ma'lumot olish uchun avvalo ob'ektning o'zini olishingiz kerak.

Ushbu ob'ektning asosiy xususiyatlari:

• x, y - voqea sodir bo'lgan paytda sichqoncha koordinatalari.
• clientX, clientY - bir xil.
• ofsetX, ofsetY - xuddi shu narsa, lekin bu sichqonchaning ofsetiga nisbatan asosiy element.
• screenX, screenY - ekran koordinatalari.
• tugmasi - sichqonchaning qaysi tugmasi bosilgan (0 - bosilmagan, 1 - chap tugma, 2 - o'ng tugma, 4 - o'rta tugma bosilgan).
• keyCode - bosilgan klaviatura tugmachasining raqamli kodi.
• srcElement - hodisani yaratgan element.
• fromElement - sichqoncha harakatlanadigan element.
• toElement - sichqonchani bosib o'tgan ob'ektning ko'rsatkichi.
• cancelBubble, agar siz uni bersangiz, nostandart usuldir rost, keyin "qalqib chiquvchi pufak" bekor qilinadi; yoki foydalanuvchi bosgan tugma kodini almashtirishingiz mumkin.

Ushbu darsda biz ba'zi kodlarni bajarish uchun JavaScript-dan foydalanib ushlab turishingiz mumkin bo'lgan voqealarning asosiy turlarini ko'rib chiqamiz.

Voqealar toifalari

Barcha JavaScript hodisalarini quyidagi toifalarga bo‘lish mumkin: Sichqoncha hodisalari, Klaviatura hodisalari, Kadr/obyekt hodisalari, Shakl hodisalari, Drag hodisalari, Animatsiya hodisalari, Bufer hodisalari, Media hodisalari, O‘tish hodisalari, Server tomonidan yuborilgan hodisalar, teginish hodisalari, Chop etish hodisalari (Bosma voqealar), turli hodisalar (Turli hodisalar).

Diqqat: JavaScript-dagi barcha hodisalar kichik (kichik) harflar bilan yozilgan.

Sichqoncha hodisalari

• sichqonchani pastga tushirish - hodisa sichqoncha tugmasi biron bir element ustida bosilganda sodir bo'ladi, lekin hali qo'yib yuborilmagan.
• sichqonchani ko'tarish - hodisa ba'zi element ustidagi sichqoncha tugmasi bosilgan holatdan bo'shatilgan holatga o'tganda sodir bo'ladi.
• bosing - hodisa foydalanuvchi elementni bosganda sodir bo'ladi. Bosish hodisalari sodir bo'lish tartibi (sichqonchaning chap va o'rta tugmalari uchun) sichqonchani pastga -> sichqonchani yuqoriga -> bosish.
• kontekst menyusi - hodisa foydalanuvchi elementni o'ng tugmasini bosganida sodir bo'ladi. Kontekst menyusi bilan bog'liq voqealar tartibi (sichqonchaning o'ng tugmasi uchun) - sichqonchani pastga -> sichqonchani ko'tarish -> kontekst menyusi .
• dblclick - hodisa foydalanuvchi elementni ikki marta bosganda sodir bo'ladi. dblclick bilan bog'liq hodisalarning sodir bo'lish tartibi: sichqonchani pastga -> sichqonchani ko'tarish -> bosish -> sichqonchani pastga -> sichqonchani ko'tarish -> bosing -> dblclick .
• sichqonchani bosish - hodisa sichqoncha kursori element yoki uning bolalaridan biriga tegishli hududga kirganda sodir bo'ladi.
• sichqonchani ko'chirish - hodisa sichqoncha kursori element yoki uning bolalaridan biriga tegishli hududdan tashqariga chiqqanda sodir bo'ladi.
• mousemove - hodisa sichqoncha kursori elementga tegishli maydon ichida harakat qilganda sodir bo'ladi.
• mouseenter - hodisa sichqoncha ko'rsatkichi elementga tegishli maydonga kirganda sodir bo'ladi. Bu hodisa ko'pincha sichqoncha ko'rsatgichi elementga tegishli maydonni tark etganda sodir bo'ladigan sichqonchani qoldirish hodisasi bilan birgalikda ishlatiladi. Sichqonchani kiritish hodisasi sichqonchani ko‘chirish hodisasiga o‘xshaydi va faqat sichqonchani kiritish hodisasi pufakchaga chiqmasligi bilan farqlanadi (hodisalarning ko‘piklanishi tushunchasi bilan biroz keyinroq tanishamiz).
• mouseleave - hodisa sichqoncha ko'rsatkichi elementga tegishli maydonni tark etganda sodir bo'ladi. Mouseleave hodisasi sichqonchani chiqarish hodisasiga o‘xshaydi va faqat sichqonchani qoldirish hodisasi ko‘piklanmasligi bilan farqlanadi (hodisa pufakchalari tushunchasi bilan biroz keyinroq tanishamiz).

Klaviatura hodisalari

Hodisalarning sodir bo'lish tartibi: keydown -> keypress -> keyup .

• keydown - hodisa element ustidagi klaviaturadagi tugma bosilganda, lekin hali bo'shatilmaganda sodir bo'ladi.
• keyup - hodisa element ustidagi klaviaturada bosilgan tugma bo'shatilgan holatga o'tganda sodir bo'ladi.
• tugmani bosish - hodisa foydalanuvchi klaviaturada element ustidagi tugmachani bosganda sodir bo'ladi.

Ob'ekt va ramka hodisalari

• beforeunload - hodisa hujjat tushirilishidan oldin sodir bo'ladi. Ushbu hodisa tasdiqlash dialog oynasida qo'shimcha xabarni ko'rsatishga imkon beradi, "Siz ushbu sahifani tark etishni xohlaysizmi?" Hujjatni yopish paytida paydo bo'ladigan standart xabarga qarab farq qilishi mumkin turli brauzerlar. Lekin siz uni o'zgartira olmaysiz yoki o'chira olmaysiz, bu usuldan faqat unga o'z xabaringizni qo'shish uchun foydalanishingiz mumkin, u standart xabar bilan birga ko'rsatiladi.
• xato - hodisa tashqi faylni (masalan, hujjat yoki rasm) yuklashda yuzaga keladigan xatolik yuzaga kelganda boshlanadi.
• hashchange - hodisa joriy URL manzilining langar qismi ("#" belgisi bilan boshlanadi) o'zgarganda sodir bo'ladi.
• load - hodisa ob'ektni yuklash tugallanganda sodir bo'ladi. Yuklash hodisasi ko'pincha veb-sahifa to'liq yuklangandan so'ng darhol skriptni bajarish uchun asosiy elementda qo'llaniladi.
• tushirish - voqea sahifa o'chirilganda sodir bo'ladi (masalan, brauzer yorlig'i (oyna) yopilganda).
• pageshow - hodisa foydalanuvchi veb-sahifaga o'tganda sodir bo'ladi, ya'ni. sahifa foydalanuvchi uchun mavjud bo'lgandan keyin. Pageshow hodisasi load hodisasiga o‘xshaydi, faqat sahifa keshdan yuklangan bo‘lsa ham har safar yuklanganda ishga tushadi. Sahifani birinchi marta yuklaganda, sahifalarni ko'rsatish hodisasi yuklanish hodisasidan so'ng darhol ishga tushadi.
• sahifani yashirish - hodisa foydalanuvchi sahifani tark etganda sodir bo'ladi (sahifani yashirish hodisasi yuklab olish hodisasidan oldin sodir bo'ladi). Bunga qo'shimcha ravishda, bu hodisa, tushirish hodisasidan farqli o'laroq, sahifani keshlashiga to'sqinlik qilmaydi.
• o'lchamini o'zgartirish - hodisa brauzer oynasining o'lchamini o'zgartirganda sodir bo'ladi.
• aylantirish - Hodisa aylantirish paneli bo'lgan elementning mazmunini aylantirganda sodir bo'ladi.

Shakl va nazorat hodisalari

• fokus - hodisa element fokusni olganida sodir bo'ladi. Ushbu hodisa paydo bo'lmaydi.
• loyqalik - hodisa ob'ekt fokusni yo'qotganda sodir bo'ladi. Ushbu hodisa paydo bo'lmaydi.
• focusin - hodisa element fokusni olganida sodir bo'ladi. Fokuslanish hodisasi fokus hodisasiga o'xshaydi, lekin undan pufakchalari bilan farq qiladi. Shuning uchun, kim e'tiborni yo'qotayotganini aniqlash kerak bo'lganda foydalanish mumkin: element yoki uning bolasi?
• fokusout - hodisa element diqqatni yo'qotmoqchi bo'lganida sodir bo'ladi. Fokuslanish hodisasi loyqalanish hodisasiga o'xshaydi, lekin undan pufakchalari bilan farqlanadi. Shuning uchun, kim e'tiborni yo'qotayotganini aniqlash kerak bo'lganda foydalanish mumkin: element yoki uning bolasi?
• o'zgartirish - hodisa elementning qiymati o'zgarganda, lekin element diqqatni yo'qotgandan keyin sodir bo'ladi. O'zgartirish hodisasiga qo'shimcha ravishda JavaScript-da ham xuddi shunday kiritish hodisasi mavjud bo'lib, u o'zgarish hodisasidan element qiymati o'zgargandan so'ng darhol sodir bo'lishi bilan farq qiladi. Change hodisasi, kiritish hodisasidan farqli o'laroq, keygen va tanlash elementlari bilan ham ishlaydi. Radio tugmalari va katakchalari uchun o'zgartirish hodisasi ushbu elementlarning holati o'zgarganda sodir bo'ladi.
• kiritish - hodisa kirish elementi yoki matn maydoni elementining qiymati o'zgargandan keyin sodir bo'ladi.
• invalid - Ma'lumotlari boshqa shakl ma'lumotlari bilan birga serverga yuborilishi kerak bo'lgan kirish elementida noto'g'ri ma'lumotlar mavjud bo'lganda sodir bo'ladi.
• reset - hodisa forma o'chirilishidan oldin sodir bo'ladi, bu type="reset" bilan kiritish elementi tomonidan amalga oshiriladi.
• qidiruv - Hodisa foydalanuvchi Enter tugmasini bosgandan yoki type="search" bilan kiritish elementidagi " x " (bekor qilish) tugmasini bosgandan keyin sodir bo'ladi.
• tanlang - hodisa elementdagi ba'zi matnni tanlaganingizdan keyin sodir bo'ladi. Select hodisasi asosan type="text" yoki textarea bilan kiritish elementi uchun ishlatiladi.
• yuborish - hodisa forma serverga yuborilishidan oldin sodir bo'ladi.

Hodisalarni torting

Olib borilgan ob'ekt bilan bog'liq hodisalar (tortib olinadigan maqsad, manba ob'ekti):

• dragstart - hodisa foydalanuvchi elementni tortib olishni boshlaganda sodir bo'ladi;
• drag - hodisa foydalanuvchi elementni sudrab ketganda sodir bo'ladi;
• dragend - hodisa foydalanuvchi elementni sudrab tugatgandan so'ng sodir bo'ladi, ya'ni. sichqoncha kursorini qo'yib yuborganimda.

Olib tashlanadigan maqsadni qabul qiluvchi tushirish maqsadi bilan bog'liq hodisalar:

• dragenter - hodisa sudrab olinadigan maqsadni qabul qilishi mumkin bo'lgan tushirish nishoni maydoniga kirganida sodir bo'ladi.
• ragleave - hodisa sudralgan ob'ekt (tortib olinadigan maqsad) uni qabul qilishi mumkin bo'lgan element (tushirish maqsadi) chegaralarini tark etganda sodir bo'ladi.
• dragover - hodisa sudrab olinadigan maqsad uni qabul qila oladigan element (tushirish maqsadi) maydoniga o'tganda sodir bo'ladi.
• tushirish - hodisa foydalanuvchi sudrab olinadigan ob'ektni uni qabul qilishi mumkin bo'lgan element (tushirish maqsadi) maydoniga qo'yganda sodir bo'ladi.

Animatsiya voqealari

CSS animatsiyasi ishlayotganda sodir bo'lishi mumkin bo'lgan uchta hodisa:

• animationstart - CSS animatsiyasi boshlanganda paydo bo'ladi.
• animatsioniteration - CSS animatsiyasi qayta-qayta bajarilganda paydo bo'ladi.
• animationend - qachon sodir bo'ladi CSS animatsiyasi tugadi.

Bufer voqealari

• nusxa ko'chirish - hodisa foydalanuvchi elementning mazmunini nusxalashda sodir bo'ladi. Nusxa ko'chirish hodisasi foydalanuvchi elementni nusxalashda ham sodir bo'ladi (masalan, img elementi bilan yaratilgan tasvirlar). Nusxa ko'chirish hodisasi asosan type="text" bilan kiritish elementlari uchun ishlatiladi.
• kesish - hodisa foydalanuvchi elementning mazmunini kesganda sodir bo'ladi.
• joylashtirish - hodisa foydalanuvchi ba'zi tarkibni elementga joylashtirganda sodir bo'ladi.

Chop etish voqealari

• postprint - Hodisa sahifa chop etila boshlaganda (ya'ni dialog oynasidagi Chop etish tugmasini bosgandan keyin) yoki Chop etish muloqot oynasi yopilgan bo'lsa sodir bo'ladi.
• preprint - voqea sahifa chop etilishidan oldin sodir bo'ladi, ya'ni. Chop etish muloqot oynasini ochishdan oldin.

O'tish voqealari

• transitionend - hodisa CSS-ga o'tish tugallangandan so'ng boshlanadi. Eslatma: Agar o'tish tugallanmaguncha olib tashlansa (masalan, agar CSS xususiyati transition-xususiyati olib tashlandi), keyin transitionend hodisasi yoqilmaydi.

Server tomonidan yuborilgan voqealar

• xato - hodisa manba bilan bog'liq xatolik yuzaga kelganda sodir bo'ladi. Xato, odatda, aloqa buzilganda paydo bo'ladi. Agar bu sodir bo'lsa, EventSource ob'ekti avtomatik ravishda serverga ulanishga harakat qiladi.
• ochiq - hodisa manbaga ulanish ochiq bo'lganda sodir bo'ladi.
• xabar - hodisa manba orqali xabar qabul qilinganda sodir bo'ladi.
  Xabar hodisasi ob'ekti quyidagi xususiyatlarni qo'llab-quvvatlaydi:
  • ma'lumotlar - xabarni o'z ichiga oladi.
  • kelib chiqish - hodisani qo'zg'atgan hujjatning URL manzili.
  • lastEventId - oxirgi qabul qilingan xabarning identifikatori (id).

Media tadbirlari

Audio/videoni yuklash jarayonida hodisalar quyidagi tartibda sodir bo'ladi: loadstart -> durationchange -> loadedmetadata -> loadeddata -> progress -> canplay -> canplaythrough.

• to'xtatish - hodisa audio/video yuklash to'xtatilganda sodir bo'ladi. Ushbu hodisa xatolik yuz bergani uchun emas, balki media ma'lumotlarini yuklab olish to'xtatilganda (bekor qilingan) sodir bo'ladi.
• xato - audio/videoni yuklashda xatolik yuz berganda sodir bo'ladi.
• to'xtab qoldi - hodisa brauzer media ma'lumotlarini olishga harakat qilganda sodir bo'ladi, lekin ma'lumotlar mavjud emas.
• - hodisa brauzer belgilangan audio/videoni qidirishni boshlaganda sodir bo'ladi, ya'ni. yuklab olish jarayoni boshlanganda.
• durationchange - hodisa audio/videoning davomiyligi o'zgarganda sodir bo'ladi. Agar audio/video yuklangan bo'lsa, davomiylik "NaN" dan audio/videoning haqiqiy davomiyligigacha o'zgaradi.
• loadedmetadata - belgilangan audio/video uchun metadata yuklanganda ishga tushirilgan hodisa. Audio/video metamaʼlumotlari quyidagilardan iborat: davomiylik, oʻlcham (faqat video) va matn treki.
• loadeddata - hodisa medianing birinchi ramkasi yuklangandan keyin sodir bo'ladi.
• progress - brauzer belgilangan audio/videoni yuklab olganida sodir bo'ladi.
• canplay - hodisa brauzer ko'rsatilgan audio/videoni o'ynata boshlaganida (ya'ni, audio/video oqimi brauzer uni o'ynashni boshlashi uchun yetarlicha buferlanganida) sodir bo'ladi.
• canplaythrough - hodisa brauzer belgilangan mediani buferlash uchun to'xtamasdan o'ynatishi mumkin bo'lgan vaqtda sodir bo'ladi.
• tugadi - voqea audio/video tinglash tugallanganda (oxiriga yetganida) sodir bo'ladi. Ushbu tadbirdan "E'tiboringiz uchun rahmat", "Tomosha qilganingiz uchun rahmat" kabi xabarlarni ko'rsatish uchun foydalanish mumkin.
• pauza - hodisa audio/video tinglash foydalanuvchi tomonidan yoki kod bo'yicha (dasturiy ravishda) to'xtatilganda sodir bo'ladi.
• play - hodisa audio/video ijrosi boshlanganda sodir bo'ladi. Bu, shuningdek, audio/video to'xtatilganda va o'ynay boshlaganda ham sodir bo'ladi.
• o'ynamoqda - Hodisa audio/video buferlash uchun to'xtatilgandan yoki to'xtatilgandan keyin o'ynatilsa sodir bo'ladi.
• ratechange - hodisa audio/videoni ijro etish tezligi o'zgarganda sodir bo'ladi.
• qidiruv - hodisa foydalanuvchi slayderni (o'tishni) ijro etilayotgan audio/videoning yangi vaqt holatiga o'tkazishni boshlaganida sodir bo'ladi.
• qidirilgan - hodisa foydalanuvchi slayderni (o'tishni) o'ynatilayotgan audio/videoning yangi vaqtinchalik holatiga ko'chirishni tugatgandan so'ng sodir bo'ladi. Izlangan hodisa izlanayotgan hodisaga qarama-qarshidir. Joriy ijro holatini olish uchun Audio/Video obyektining currentTime xususiyatidan foydalaning.
• timeupdate - voqea eshitilayotgan audio/videoning vaqt holati o'zgarganda sodir bo'ladi.
  Bu hodisa sodir bo'ladi:
  • audio/video oqimini o'ynatganda.
  • slayderni o'ynalayotgan audio/videoning yangi vaqt holatiga o'tkazganda.
  Vaqtni yangilash hodisasi ko'pincha Audio/Video ob'ektining currentTime xususiyati bilan birgalikda qo'llaniladi, u hozir ijro etilayotgan audio/videoning joriy vaqt holatini soniyalarda qaytaradi.
• ovoz balandligini o'zgartirish - bu voqea o'ynalayotgan video/audio oqimining ovozi har safar o'zgarganda sodir bo'ladi.
  Ushbu hodisa quyidagi hollarda sodir bo'ladi:
  • ovoz balandligini oshirish yoki kamaytirish;
  • ovozni o'chirish yoki o'chirish.
• kutish - voqea video buferlash uchun to'xtatilganda sodir bo'ladi.

Har xil tadbirlar

• almashtirish - hodisa foydalanuvchi tafsilotlar elementini ochganda yoki yopganda sodir bo'ladi. Tafsilotlar elementi foydalanuvchi kerak bo'lganda ko'rishi yoki yashirishi mumkin bo'lgan qo'shimcha ma'lumotlarni yaratish uchun mo'ljallangan.
• g'ildirak - hodisa sichqonchaning g'ildiragi element ustida oldinga yoki orqaga aylantirilganda sodir bo'ladi.

Vazifalar

"Klaviaturadagi tugmachani bosish (onkeypress)" hodisa majmuasimi? Va agar shunday bo'lsa, unda qanday oddiy voqealar natijasida paydo bo'ladi?

Misol uchun, sizda 2 ta p element mavjud va foydalanuvchi sichqonchani bitta p elementga tegishli hududdan boshqa p elementga tegishli maydonga o'tkazadi. Bu holatda qanday hodisalar ro'y beradi va ularni qanday elementlar hosil qiladi?

Tadbirlar mavzusi juda muhim va juda qiziqarli. Buning yordamida siz foydalanuvchini xursand qiladigan juda ko'p qiziqarli narsalarni qilishingiz mumkin. JavaScript-dagi hodisa foydalanuvchi yoki brauzer tomonidan qo'zg'atiladigan muayyan harakatdir. Masalan, hodisa sichqoncha tugmachasini bosish, sichqonchaning harakati, elementga diqqatni qaratish, matn maydonidagi qiymatni o'zgartirish, brauzer oynasining hajmini o'zgartirish va hokazo bo'lishi mumkin.

Men barcha voqealar bilan stol tayyorladim (men bilaman kamida) JavaScript-da. Unda siz birinchi navbatda hodisa nomini, ushbu hodisani yarata oladigan elementlarni va JavaScript hodisasining tavsifini topasiz.

Tadbir	Ob'ekt	Voqea sababi
Abort	Rasm	Rasm yuklanishi to'xtatilmoqda
Xiralashtirish		Element fokusi yoʻqolgan
O'zgartirish	Faylni yuklash, tanlash, matn, matn maydoni	Qiymatni o'zgartirish
bosing	Hudud, tugma, tasdiqlash qutisi, hujjat, havola, radio, qayta o'rnatish, yuborish	Elementni sichqoncha bilan bosing
DblClick	Hudud, hujjat, havola	Element ustiga ikki marta bosing
DragDrop	Oyna	Brauzer oynasiga o'ting
Diqqat	Tugma, katakcha, faylni yuklash, ramka, qatlam, parol, radio, tiklash, tanlash, yuborish, matn, matn maydoni, oyna	Elementga diqqatni o'rnatish
KeyDown		Klaviaturadagi tugmani bosish
Tugmani bosing	Hujjat, rasm, havola, matn maydoni	Klaviaturada tugmachani ushlab turish
KeyUp	Hujjat, rasm, havola, matn maydoni	Klaviaturadagi tugmachani bo'shatish
Yuklash	Hujjat, rasm, qatlam, oyna
Sichqonchani pastga	Tugma, hujjat, havola	Sichqoncha tugmasi bosildi
Sichqonchani harakatlantirish	Oyna	Sichqoncha harakatda
MouseOut	Maydon, qatlam, havola	Sichqoncha element chegarasidan tashqariga chiqadi
Sichqoncha ustiga bosing	Maydon, qatlam, havola	Sichqoncha element ustida joylashgan
MouseUp	Tugma, hujjat, havola	Sichqoncha tugmasi chiqarildi
Ko'chirish	Ramka	Elementni ko'chirish
Qayta o'rnatish	Shakl	Shaklni tiklash
Oʻlchamini oʻzgartirish	Ramka, oyna	Oʻlchamini oʻzgartirish
Tanlang	Matn, Textarea	Matn tanlash
Yuborish	Shakl	Ma'lumotlarni uzatish
Yukni tushirish	Oyna	Joriy sahifa yuklanmoqda

Endi JavaScript-da voqealardan qanday foydalanishni aniqlaymiz. Hodisa ishlov beruvchilar deb ataladiganlar mavjud. Voqealarni boshqaruvchilar ma'lum bir voqea sodir bo'lganda nima bo'lishini aniqlaydilar. JavaScript-da hodisa ishlov beruvchilari quyidagi umumiy shaklga ega:

OnEventName

Ya'ni, birinchi navbatda "on" prefiksi, so'ngra voqea nomi, masalan, quyidagi voqea ishlov beruvchilari keladi: onFocus, onClick, onSubmit va boshqalar. Menimcha, bu erda hech qanday savol yo'q. Va endi asosiy savol: "JavaScript-da voqealarni qanday ishlatish kerak?". Ularni qo'llash doirasi juda katta va endi biz bitta muammoni ko'rib chiqamiz. Sahifada uchta havola mavjud. Havolalarning har biri boshqa fon rangi uchun javobgardir (masalan, oq, sariq va yashil). Dastlab fon oq rangga ega. Sichqonchani ma'lum bir havola ustiga olib borganingizda, fon rangi o'zgaradi. Sichqonchani uzoqroqqa olib borganingizda, fon rangi standart rangga qaytadi. Havolani bosganingizda, fon rangi standart sifatida saqlanadi.

a (
rang: ko'k;
matnni bezash: tagiga chizish;
kursor: ko'rsatgich;
}


var default_color = "oq";

funksiya setTempColor(rang) (
document.bgColor = rang;
}

funksiya setDefaultColor(rang) (
default_color = rang;
}

defaultColor() funksiyasi (
document.bgColor = default_color;
}



Oq
Sariq
Yashil

Keling, ushbu skriptni, aniqrog'i JavaScript va CSS-ni qo'llab-quvvatlaydigan butun HTML sahifasini ko'rib chiqaylik (boshqacha aytganda, bu DHTML misolidir). Avval odatiy HTML teglari keladi, ular bilan har qanday HTML sahifasi boshlanadi. Keyinchalik biz berilgan sahifadagi barcha havolalar ko'k rangda, tagiga chizilgan va ulardagi sichqoncha ko'rsatkichi "Ko'rsatkich" shaklida bo'lishini talab qiladigan uslub yaratamiz. Siz shunday deyishingiz mumkin: "Nima uchun uslubni o'rnatishingiz kerak? Axir, havolalar bir xil bo'ladi." To'g'ri, havolalar, lekin bizda bunday havolalar yo'q (oxir-oqibat tegda href atributi yo'q), shuning uchun ular sukut bo'yicha oddiy qora matn bo'ladi (ammo siz matnni ham bosishingiz mumkin). Shuning uchun, uslub majburiydir. Siz uni olib tashlashingiz va nima bo'lishini ko'rishingiz mumkin. Yaxshisi, href atributini qo'shing (har qanday qiymat bilan, hatto bo'sh) va skript nima uchun ishlashni to'xtatganini tushuntiring. Keyin JavaScript boshlanadi. Biz standart rang uchun javobgar default_color o'zgaruvchisini yaratamiz. Keyin uchta funktsiya keladi:

setTempColor() funktsiyasi rangni vaqtincha o'zgartirish uchun javobgardir.

setDefaultColor() funktsiyasi standart rangni o'zgartirish uchun javobgardir.

defaultColor() funktsiyasi standart fon rangini o'rnatadi.

Keyin hodisalarni qayta ishlash ko'rinishidagi atributlarga ega havolalar mavjud. Sichqonchani havola ustiga olib borganingizda, MouseOver hodisasi sodir bo'ladi; shunga mos ravishda onMouseOver hodisasi ishlov beruvchisi setTempColor() funksiyasini chaqiradi va mos keladigan parametrni uzatadi. Sichqonchani elementdan olib tashlaganingizda, MouseOut hodisasi ko'tariladi va keyin defaultColor() funksiyasi chaqiriladi, bu fon rangini standart rangga o'rnatadi. Va nihoyat, sichqoncha havolani bosganda (onClick ishlov beruvchisi), parametrda ko'rsatilgan rangni standart fon rangiga o'rnatadigan setDefaultColor() funksiyasi chaqiriladi. Ko'rib turganingizdek, hamma narsa juda oddiy.

Bu JavaScript-da voqealardan foydalanish printsipi edi va keyin hamma narsa faqat sizning tasavvuringizga bog'liq!

Foydalanadigan ba'zi dasturlar JavaScript hodisasi foydalanuvchi kiritish bilan bevosita ishlash. Bunday o'zaro ta'sirlarning paydo bo'lish momenti va tartibini oldindan aytib bo'lmaydi.

Voqealar boshqaruvchilari

Klaviatura bosilishiga uning holatini doimiy ravishda o‘qib chiqish orqali javob berishingiz mumkin, bu tugma yana qo‘yib yuborilgunga qadar bosilgan vaqtni ushlaydi.

Ibtidoiy mashinalarda ma'lumotlarni kiritish shu tarzda amalga oshirildi. Eng rivojlangani - bu tugmachani bosishni aniqlash va uni navbatga qo'yish. Keyin dastur vaqti-vaqti bilan yangi hodisalarning navbatini tekshirishi va u erda topilgan narsaga munosabat bildirishi mumkin. Bunday holda, dastur navbatni skanerlashni unutmasligi va buni tez-tez bajarishi kerak.

Tugmachani bosgandan boshlab dastur ushbu hodisani aniqlagunga qadar, u aslida so'rovlarga javob bermaydi. Ushbu yondashuv so'rov (so'rov) deb ataladi.

Aksariyat dasturchilar iloji bo'lsa, undan qochishga harakat qilishadi.

Eng yaxshi usul kodga voqealar sodir bo'lganda reaksiyaga kirishish qobiliyatini beradigan tizimni amalga oshirishdir. Brauzerlar buni muayyan JavaScript hodisalari uchun ishlov beruvchi funktsiyalarini ro'yxatdan o'tkazish imkoniyatini taqdim etish orqali amalga oshiradilar:

Ishlovchini faollashtirish uchun ushbu hujjatni bosing.

addEventListener("klik", function() ( console.log("Siz bosdingiz!"); ));

addEventListener funksiyasi birinchi argument tomonidan tasvirlangan hodisa sodir bo'lganda uning ikkinchi argumenti chaqirilishi uchun ro'yxatga olinadi.

Voqealar va DOM tugunlari

Har bir brauzer hodisasi ishlov beruvchisi kontekst bilan ro'yxatdan o'tgan. AddEventListener funktsiyasi chaqirilganda, u butun oyna uchun usul sifatida chaqiriladi, chunki brauzerda global diapazon ekvivalentdir. oyna obyekti. Har bir DOM elementida o'zining addEventListener usuli mavjud bo'lib, u sizga ushbu elementdagi voqealarni tinglash imkonini beradi:

Menga bosing

Bu erda ishlov beruvchi yo'q.

var tugmasi = document.querySelector("tugma"); button.addEventListener("klik", function() ( console.log("Tugma bosildi."); ));

IN bu misolda ishlov beruvchi tugma tuguniga ulangan. JavaScript sichqoncha hodisalari ishlov beruvchini ishga tushiradi, lekin hujjatning qolgan qismidagi bosishlar bunday qilmaydi.

Tugunning onclick atributini o'rnatish orqali biz bir xil natijaga erishamiz. Ammo tugun faqat bitta onclick atributiga ega, shuning uchun har bir tugunga faqat bitta ishlov beruvchini ro'yxatdan o'tkazishingiz mumkin. addEventListener usuli istalgan son ishlov beruvchilarni qo'shish imkonini beradi. Shunday qilib, biz allaqachon ro'yxatdan o'tgan protsessorni tasodifiy almashtirishdan sug'urtalangan bo'lamiz.

RemoveEventListener usuli addEventListener ga o'xshash argumentlar bilan chaqiriladi. U ishlov beruvchini olib tashlaydi:

Bir martalik tugma var tugmasi = document.querySelector("tugma"); function once() ( console.log("Bajarildi."); button.removeEventListener("klik", bir marta); ) button.addEventListener("klik", bir marta);

Ishlovchi funksiyani bekor qilish uchun biz unga nom beramiz (masalan, bir marta). Shunday qilib, biz uni addEventListener va removeEventListener-ga o'tkazamiz.

Hodisa ob'ektlari

Yuqoridagi misollarda biz bu haqda eslatib o'tmagan bo'lsak ham, JavaScript hodisalarni qayta ishlash funksiyasiga argument beriladi: hodisa ob'ekti. Bu voqea haqida qo'shimcha ma'lumot beradi. Masalan, sichqonchaning qaysi tugmasi bosilganligini bilmoqchi bo'lsak, qaysi hodisa ob'ektining qiymatini olishimiz kerak:

Menga sichqonchaning istalgan tugmasi bilan bosing var tugmasi = document.querySelector("button"); button.addEventListener("sichqonchani pastga tushirish", funktsiya(voqea) ( if (event.which == 1) console.log("Chap tugma"); else if (event.which == 2) console.log("O'rta tugma" ); else if (event.which == 3) console.log("O'ng tugma"); ));

Ob'ektda saqlanadigan ma'lumotlar hodisaning turiga qarab o'zgaradi. Ob'ekt turi xususiyati har doim hodisani identifikatsiya qiluvchi qatorni o'z ichiga oladi (masalan, "klik" yoki "sichqonchani pastga").

Yoyish

Ota-ona tugunlari uchun ro'yxatdan o'tgan voqea ishlov beruvchilari (masalan, JavaScript teginish hodisalari) shuningdek, pastki elementlarda sodir bo'lgan voqealarni ham oladi. Agar xatboshi ichidagi tugma bosilsa, paragrafning voqea ishlovchilari ham qabul qiladi hodisani bosing.

Voqea sodir bo'lgan tugundan asosiy tugunga va hujjat ildiziga tarqaladi. Muayyan tugunda ro'yxatdan o'tgan barcha ishlov beruvchilar navbatma-navbat harakat qilgandan so'ng, butun oyna uchun ro'yxatdan o'tgan ishlov beruvchilar hodisaga javob bera oladi.

Istalgan vaqtda hodisani qayta ishlash vositasi hodisaning yanada tarqalishini oldini olish uchun hodisa ob'ektida stopPropagation usulini chaqirishi mumkin. Bu sizda boshqa interaktiv element ichida tugma mavjud bo'lganda foydali bo'lishi mumkin va siz tashqi elementlarni bosish uchun belgilangan xatti-harakatni ishga tushirish uchun tugmani bosishni istamasangiz.

Quyidagi misolda biz tugma va paragraf uchun "MouseDown" ishlov beruvchilarini ro'yxatdan o'tkazamiz. Sichqonchaning o'ng tugmachasini bosganingizda (JavaScript sichqoncha hodisalari), ishlov beruvchi stopPropagation usulini chaqiradi, bu esa paragraf ishlov beruvchisining ishlashini oldini oladi. Sichqonchaning boshqa tugmasi bilan tugmani bosganingizda, ikkala ishlov beruvchi ham ishga tushadi:

Undagi paragraf va tugma.

var para = document.querySelector("p"); var tugmasi = document.querySelector("tugma"); para.addEventListener("sichqonchani pastga tushirish", function() ( console.log("Pagraf uchun ishlov beruvchi."); )); button.addEventListener("sichqonchani pastga tushirish", funktsiya(voqea) ( console.log("Tugma uchun ishlov beruvchi."); if (event.which == 3) event.stopPropagation(); ));

Aksariyat hodisa ob'ektlari ular sodir bo'lgan tugunni ko'rsatadigan maqsadli xususiyatga ega. Tugundan yuqoriga ko'tariladigan ba'zi bir hodisani tasodifan ko'rib chiqmaslik uchun ushbu xususiyatdan foydalanishingiz mumkin.

Muayyan turdagi hodisa doirasini kengaytirish uchun JavaScript hodisasi nishonidan ham foydalanishingiz mumkin. Misol uchun, agar sizda uzun tugmalar ro'yxatini o'z ichiga olgan tugun bo'lsa, tashqi tugun uchun bir marta bosish ishlov beruvchisini ro'yxatdan o'tkazish va barcha tugmalar uchun ishlov beruvchi misollarini ro'yxatdan o'tkazishdan ko'ra, tugma bosilganligini kuzatish uchun maqsad xususiyatidan foydalanish qulayroqdir:

A B C document.body.addEventListener("klik", funksiya(voqea) ( agar (event.target.nodeName == "TUGMA") console.log("Clicked", event.target.textContent); ));

Standart harakatlar

Ko'pgina hodisalar ular bilan bog'liq standart harakatlarga ega. Agar siz havolani bossangiz, u sizni havolaning maqsadli elementiga olib boradi. Agar siz pastga o'qni bossangiz, brauzer sahifani pastga aylantiradi. Agar siz sichqonchaning o'ng tugmachasini bossangiz, kontekst menyusi ochiladi.

Aksariyat hodisa turlari uchun JavaScript voqea ishlovchilari standart harakatlar bajarilishidan oldin chaqiriladi. Agar siz standart xatti-harakatlar sodir bo'lishini xohlamasangiz, hodisa ob'ektida preventDefault usulini chaqirishingiz kerak.

Undan maxsus klaviatura yorliqlari yoki kontekst menyularini amalga oshirish uchun foydalaning. Yoki foydalanuvchilar kutgan xatti-harakatlarni bekor qilish uchun. Quyida kuzatib bo'lmaydigan havola mavjud:

MDN var link = document.querySelector("a"); link.addEventListener("klik", funktsiya(voqea) ( console.log("Yo'q."); event.preventDefault(); ));

Agar buni qilish uchun yaxshi sabab bo'lmasa, buni qilmaslikka harakat qiling.

Brauzerga qarab, ba'zi hodisalar to'xtatilmasligi mumkin. IN Gugl xrom masalan, joriy yorliqni (Ctrl-W yoki Buyruq-W) yopish uchun klaviatura yorlig'i (JavaScript hodisasi kalit kodi) JavaScript yordamida qayta ishlanmaydi.

Asosiy voqealar

Foydalanuvchi klaviaturadagi tugmachani bosganda, brauzer "keydown" hodisasini ishga tushiradi. U kalitni bo'shatganda, "keyup" hodisasi yonadi:

V tugmachasini bosganingizda bu sahifa binafsha rangga aylanadi.

addEventListener("keydown", funktsiya(voqea) ( agar (event.keyCode == 86) document.body.style.background = "violet"; )); addEventListener("keyup", funktsiya(voqea) ( agar (event.keyCode == 86) document.body.style.background = ""; ));

Ushbu hodisa foydalanuvchi tugmachani bosib ushlab turganda yoki tugmani bosib turganda ham yonadi. Misol uchun, agar siz o'yindagi belgi tezligini o'q tugmachasini bosish orqali oshirmoqchi bo'lsangiz va tugmani qo'yib yuborish orqali uni yana kamaytirmoqchi bo'lsangiz, u holda tugmachani har bosganingizda tezlikni oshirmaslik uchun ehtiyot bo'lishingiz kerak.

Oldingi misolda hodisa obyektining JavaScript kalit kodi xususiyati ishlatilgan. Uning yordami bilan qaysi tugma bosilgan yoki qo'yib yuborilganligi aniqlanadi. Kalitning raqamli kodini haqiqiy kalitga qanday tarjima qilish har doim ham aniq emas.

Unicode belgilar kodi harf va raqamli kalit qiymatlarini o'qish uchun ishlatiladi. U kalitda ko'rsatilgan harf (katta harf) yoki raqam bilan bog'langan. Satrlar uchun charCodeAt usuli ushbu qiymatni olish imkonini beradi:

console.log("Violet".charCodeAt(0)); // → 86 console.log("1".charCodeAt(0)); // → 49

Boshqa kalitlar ular bilan bog'liq kamroq taxmin qilinadigan kalit kodlariga ega. Eng yaxshi yo'l Sizga kerak bo'lgan kodni aniqlash tajriba masalasidir. Qabul qilgan kalit kodlarini ushlaydigan va kerakli tugmachani bosadigan tugmachalarni bosish hodisasi ishlovchisini ro'yxatdan o'tkazing.

Shift, Ctrl, Alt kabi tugmalar oddiy tugmalar kabi hodisalarni yaratadi. Lekin tugmalar birikmalarini kuzatishda siz ushbu tugmalar klaviatura hodisalari va JavaScript sichqoncha hodisalari xususiyatlari bilan bosilishini ham aniqlashingiz mumkin: shiftKey , ctrlKey , altKey va metaKey :

Davom etish uchun Ctrl-Space-ni bosing.

addEventListener("keydown", funktsiya(voqea) ( if (event.keyCode == 32 && event.ctrlKey) console.log("Davom etilmoqda!"); ));

"Klaviaturani pastga tushirish" va "tugmani ochish" hodisalari haqiqiy tugmachalar haqida ma'lumot beradi. Ammo agar bizga kirish matnining o'zi kerak bo'lsa-chi? Kalit kodlardan matnni olish noqulay. Buning uchun "tugmachani bosish" hodisasi mavjud bo'lib, u "tugmachani pastga tushirish" dan keyin darhol ishga tushadi. Tugma bosilganda u "tugmachani pastga tushirish" bilan birga takrorlanadi. Lekin faqat belgilar kiritilgan kalitlar uchun.

Hodisa obyektidagi charCode xususiyati Unicode belgilar kodi sifatida talqin qilinishi mumkin bo'lgan kodni o'z ichiga oladi. Ushbu kodni bitta belgilar qatoriga aylantirish uchun String.fromCharCode funksiyasidan foydalanishimiz mumkin.

Kirish fokusini ushbu sahifaga o'rnating va biror narsa yozing.

addEventListener("tugmachani bosish", funksiya(voqea) ( console.log(String.fromCharCode(event.charCode)); ));

Hodisa sodir bo'ladigan DOM tuguni tugma bosilganda kirish fokusiga ega bo'lgan elementga bog'liq. Oddiy tugunlar kirish fokusiga ega bo'lolmaydi (agar siz ularga tabindex atributini o'rnatmasangiz), lekin havolalar, tugmalar va shakl maydonlari kabi elementlar mumkin.

Agar biron bir alohida element kirish fokusiga ega bo'lmasa, asosiy voqealar va JavaScript teginish hodisalari uchun maqsadli tugun document.body hisoblanadi.

Sichqonchani bosish

Sichqoncha tugmachasini bosish ham bir qator hodisalarni keltirib chiqaradi. "Mousedown" va "mouseup" hodisalari "keydown" va "keyup" hodisalariga o'xshaydi. Ular sichqoncha tugmasi bosilganda va qo'yib yuborilganda ishga tushadi. Ushbu hodisalar voqea sodir bo'lganida ustiga o'rnatilgan DOM tugunlarida sodir bo'ladi.

Sichqonchani bosish va qo'yib yuborishga ega bo'lgan umumiy tugun uchun bosish hodisasi sichqonchani ochish hodisasidan keyin ishga tushiriladi. Masalan, bitta elementda sichqoncha tugmachasini bossangiz, kursorni boshqa elementga olib borib, tugmani qo'yib yuborsangiz, bu ikkala elementni o'z ichiga olgan elementda bosish hodisasi sodir bo'ladi.

Ikki marta bosish bir-biriga yaqin bo'lsa, "dblclick" (ikki marta bosish) hodisasi ham o'chiriladi. Ikkinchi marta bosgandan keyin paydo bo'ladi. Sichqoncha hodisasi sodir bo'lgan joy haqida aniq ma'lumot olish uchun siz hujjatning yuqori chap burchagiga nisbatan hodisaning koordinatalarini (piksellarda) o'z ichiga olgan pageX va pageY xususiyatlarining qiymatini olishingiz kerak.

Quyida ibtidoiy chizish dasturining amalga oshirilishi keltirilgan. Hujjatda sichqonchani har bosganingizda (kursor ostida) nuqta qo'shiladi:

tana (balandligi: 200px; fon: bej; ) .nuqta (balandligi: 8px; eni: 8px; chegara radiusi: 4px; /* yumaloq burchaklar */ fon: koʻk; pozitsiya: mutlaq; ) addEventListener("klik", funksiya (voqea) ( var nuqta = document.createElement("div"); dot.className = "nuqta"; dot.style.left = (event.pageX - 4) + "px"; dot.style.top = (voqea .pageY - 4) + "px"; document.body.appendChild(nuqta); ));

ClientX va clientY xususiyatlari pageX va pageY ga o'xshaydi, lekin ular hujjatning ko'rinadigan qismiga tegishli. Ulardan sichqoncha koordinatalarini getBoundingClientRect funksiyasi tomonidan qaytarilgan koordinatalar bilan solishtirish uchun foydalanish mumkin.

Sichqoncha harakati

Har safar sichqoncha harakat qilganda, JavaScript sichqoncha hodisalari toʻplamidagi “mousemove” hodisasi ishga tushiriladi. U sichqonchaning holatini kuzatish uchun ishlatilishi mumkin. Bu sichqoncha bilan elementlarni sudrab borish qobiliyatini amalga oshirishda ishlatiladi.

Quyidagi misolda dastur panelni ko'rsatadi va hodisa ishlov beruvchilarini shunday o'rnatadiki, sudraganda panel torroq yoki kengroq bo'ladi:

Kengligini o'zgartirish uchun panelning chetini torting:

var lastX; // Sichqonchaning oxirgi X holatini kuzatadi var rect = document.querySelector("div"); rect.addEventListener("sichqonchani pastga tushirish", funktsiya(voqea) ( agar (event.which == 1) ( lastX = event.pageX; addEventListener("mousemove", ko'chirildi); event.preventDefault(); // Tanlovni oldini oladi ) ) ); funktsiya tugmasiPressed(voqea) ( if (event.buttons == null) return event.which != 0; else return event.buttons != 0; ) function moved(voqea) ( if (!buttonPressed(event)) ( removeEventListener( "mousemove", ko'chirildi); ) else (var dist = event.pageX - lastX; var newWidth = Math.max(10, rect.offsetWidth + dist); rect.style.width = newWidth + "px"; lastX = voqea .pageX;))

E'tibor bering, "mousemove" ishlov beruvchisi butun oyna uchun ro'yxatdan o'tgan. Sichqoncha o'lchamini o'zgartirish vaqtida paneldan tashqariga chiqsa ham, biz hali ham panel kengligini yangilaymiz va sichqoncha tugmasi qo'yib yuborilganda JavaScript teginish hodisalarini to'xtatamiz.

Foydalanuvchi sichqoncha tugmachasini bo'shatganda panel o'lchamini o'zgartirishni to'xtatishimiz kerak. Afsuski, barcha brauzerlar sichqonchani siljitish hodisalari uchun qaysi xususiyatni o'rnatmaydi. Shunga o'xshash ma'lumotlarni taqdim etadigan standart tugmalar xususiyati mavjud, ammo u barcha brauzerlarda ham qo'llab-quvvatlanmaydi. Yaxshiyamki, barcha asosiy brauzerlar bitta narsani qo'llab-quvvatlaydi: tugmalar yoki qaysi . Yuqoridagi misoldagi buttonPressed funksiyasi avval buttons xususiyatidan foydalanishga harakat qiladi va agar u mavjud bo'lmasa, qaysi ga o'tadi.

Sichqoncha tugun ustida harakatlansa yoki tugunni tark etganda, "sichqonchani ko'tarish" yoki "sichqonchani o'chirish" hodisalari ishga tushiriladi. Ular hover effektlarini yaratish, qandaydir sarlavhalarni ko'rsatish yoki element uslubini o'zgartirish uchun ishlatilishi mumkin.

Bunday effektni yaratish uchun sichqonchani o'tish hodisasi sodir bo'lganda uni ko'rsatishni boshlash va sichqonchani chiqarish hodisasidan keyin tugatish etarli emas. Sichqoncha tugundan uning bolalaridan biriga o'tganda, ota-ona tugun uchun "sichqonchani chiqarish" hodisasi sodir bo'ladi. Sichqoncha ko'rsatkichi tugunning tarqalish oralig'ini tark etmagan bo'lsa ham.

Eng yomoni, ushbu JavaScript hodisalari boshqa hodisalar kabi tarqaladi. Sichqoncha ishlov beruvchisi ro'yxatdan o'tgan bola tugunlaridan birini tark etganda, "sichqonchani chiqarish" hodisasi ko'tariladi.

Ushbu muammoni hal qilish uchun tegishliTarget hodisasi obyekti xususiyatidan foydalanishingiz mumkin. "Sichqonchani ko'tarish" hodisasi sodir bo'lganda, u avval qaysi element ustiga o'rnatilganligini ko'rsatadi. Va "sichqonchani siljitish" bo'lsa - ko'rsatgich qaysi elementga o'tkaziladi. Biz sichqonchani bosish effektini faqat tegishliTarget maqsadli tugunimizdan tashqarida bo'lganda o'zgartiramiz.

Bunday holda, biz xatti-harakatni o'zgartiramiz, chunki sichqoncha tugunning tashqarisida joylashgan (yoki aksincha):

Sichqonchani ushbu paragraf ustiga olib boring.

var para = document.querySelector("p"); funktsiya isInside(tugun, maqsad) ( uchun (; tugun != null; tugun = node.parentNode) agar (tugun == maqsad) rostni qaytaradi; ) para.addEventListener("sichqonchani ko'tarish", funktsiya (voqea)) ( agar ( !isInside (event.relatedTarget, para)) para.style.color = "qizil"; )); para.addEventListener("sichqonchani chiqarish", funktsiya(voqea) ( agar (!isInside(event.relatedTarget, para)) para.style.color = ""; ));

isInside funktsiyasi berilgan tugunning asosiy havolalarini yoki unga yetguncha kuzatib boradi yuqori qismi hujjat (tugun null bo'lganda). Yoki bizga kerak bo'lgan asosiy element topilmaydi.

Quyidagi misolda ko'rsatilganidek, CSS: hover pseudo-selektori yordamida hover effektini yaratish ancha oson. Agar hover effekti maqsadli tugun uslubini o'zgartirishdan ko'ra murakkabroq narsani o'z ichiga olgan bo'lsa, sichqonchani ko'tarish va sichqonchani siljitish hodisalari (JavaScript sichqoncha hodisalari) yordamida hiyla ishlatishingiz kerak:

Hodisalarni aylantiring

Har safar element aylantirilganda, JavaScript-ni aylantirish hodisasi ishga tushiriladi. Undan nima borligini kuzatish uchun foydalanish mumkin bu daqiqa foydalanuvchi tomonidan ko'rilgan; ko'rish oynasidan tashqarida joylashgan animatsiyani o'chirish uchun.

Quyidagi misolda biz hujjatning yuqori o'ng burchagida harakatlanish satrini ko'rsatamiz va sahifani pastga aylantirganda, uni parcha-parcha boshqa rang bilan to'ldirish uchun yangilaymiz:

.progress (chegara: 1px toʻliq koʻk; eni: 100px; joylashuv: qattiq; tepa: 10px; oʻng: 10px; ) .progress > div (balandlik: 12px; fon: koʻk; kenglik: 0%; ) tana ( balandlik: 2000px ;)

Meni aylantiring...

var bar = document.querySelector(".progress div"); addEventListener("scroll", function() ( var max = document.body.scrollHeight - innerHeight; var foiz = (pageYOffset / max) * 100; bar.style.width = foiz + "%"; ));

Elementning o'rnini yoki sobit xususiyatini o'rnatish orqali biz pozitsiyani belgilash bilan bir xil natijaga erishamiz: absolute . Lekin bu, shuningdek, elementni hujjatning qolgan qismi bilan birga aylantirishni bloklaydi. Natijada, taraqqiyot indikatori yuqori burchakda statik ravishda o'rnatiladi. Uning ichida boshqa element mavjud bo'lib, uning hajmi joriy taraqqiyotga qarab o'zgaradi.

Kenglikni o'rnatishda o'lchov birligi sifatida biz px emas, balki % dan foydalanamiz, shuning uchun elementning o'lchamlari progress satrining o'lchamiga mutanosib ravishda o'zgaradi.

InnerHeight global o'zgaruvchisi oynaning balandligini o'z ichiga oladi, biz uni hujjatning umumiy mavjud o'zgaruvchan balandligidan ayirishimiz kerak. Hujjatning pastki qismiga kirganingizda oynani pastga aylantira olmaysiz. InnerHeight bilan innerWidth ham ishlatilishi mumkin. pageYOffset (joriy aylantirish oynasi holati) ni maksimal ruxsat etilgan aylantirish pozitsiyasiga bo'lish va 100 ga ko'paytirish bizga progress satrining foizini beradi.

JavaScript-ni aylantirish hodisasida preventDefault ni chaqirish aylantirishni oldini olmaydi. Hodisa ishlov beruvchisi faqat aylantirish sodir bo'lgandan keyin chaqiriladi.

Fokus hodisalarini kiriting

Agar element kirish fokusiga ega bo'lsa, brauzer unga "fokus" hodisasini ishga tushiradi. Kirish fokusi olib tashlanganida, "blur" hodisasi ishga tushiriladi.

Bu ikki hodisa tarqalmaydi. Agar asosiy elementda kirish fokusi bo'lsa, ota-element ishlovchisiga xabar berilmaydi.

Quyidagi misol uchun asboblar maslahati ko'rsatilgan matn maydoni, hozirda kirish fokusiga ega:

Nomi:

Yosh:

var help = document.querySelector("#help"); var fields = document.querySelectorAll("input"); uchun (var i = 0; i< fields.length; i++) { fields[i].addEventListener("focus", function(event) { var text = event.target.getAttribute("data-help"); help.textContent = text; }); fields[i].addEventListener("blur", function(event) { help.textContent = ""; }); }

Deraza ob'ekti foydalanuvchi hujjat ko'rsatiladigan yorliq, brauzer oynasiga o'tganda yoki undan chiqib ketganda "fokus" va "loyqalash" hodisalarini oladi.

Tadbirni yuklash

Sahifani yuklash tugagach, hujjat tanasi va oyna ob'ektlari uchun JavaScript hodisasi "yuklash" ko'tariladi. U butun hujjatni yuklashni talab qiladigan harakatlarni ishga tushirishni rejalashtirish uchun ishlatiladi. Shuni unutmangki, kontent ushbu tegga duch kelganda darhol ishga tushadi. Ba'zan juda erta. Misol uchun, skript dan keyin yuklanadigan hujjat qismlari bilan biror narsa qilish kerak bo'lganda.

va tashqi fayllarni yuklaydigan skript teglarida "yuklash" hodisasi ham mavjud. Bu ular bilan bog'langan fayl yuklab olinganligini bildiradi. Kirish fokus hodisalari singari, yuklanish hodisalari ham tarqalmaydi.

Biz sahifani yopganimizda yoki boshqasiga o'tganimizda (masalan, havolani bosish orqali), "yuklashdan oldin" hodisasi o'chiriladi. U hujjatni yopgandan so'ng foydalanuvchining ishlayotgan narsasini tasodifan yo'qotishining oldini olish uchun ishlatiladi.

Sahifani tushirishni oldini olish preventDefault usuli yordamida amalga oshirilmaydi. Buning o'rniga ishlov beruvchidan satr qaytariladi. U foydalanuvchidan sahifada qolishni yoki undan chiqishni xohlashini so'raydigan dialog oynasida ishlatiladi. Ushbu mexanizm foydalanuvchining sahifani tark etish imkoniyatiga ega bo'lishini ta'minlaydi, hatto zararli skript ishlayotgan bo'lsa ham, uning maqsadi tashrifchini sahifada ushlab turishdir.

Skriptni bajarish ketma-ketligi

Turli omillar skriptning bajarilishini boshlashi mumkin: tegni o'qish, voqea sodir bo'lishi. requestAnimationFrame usuli keyingi sahifani qayta qurishdan oldin funksiya chaqiruvini belgilaydi. Bu skriptlarni ishga tushirishning yana bir usuli.

JavaScript hodisalarni tanlaydi va qolganlari istalgan vaqtda ishga tushishi mumkin, lekin ikkita skript hech qachon bitta hujjatda bir vaqtning o'zida ishga tushmaydi. Agar skript allaqachon ishlayotgan bo'lsa, boshqa skript tomonidan rejalashtirilgan voqea ishlov beruvchilari va kod parchalari o'z navbatini kutishlari kerak. Skript uzoq vaqt davomida ishlayotgan bo'lsa, hujjatning muzlashining sababi shu. Brauzer bosishlar va boshqa hodisalarga javob bermaydi, chunki joriy skript ishga tushmaguncha voqea ishlov beruvchilarini ishga tushira olmaydi.

Ba'zi dasturlash muhitlari bir vaqtning o'zida ishlaydigan bir nechta bajarilish iplarini yaratishga imkon beradi. Bir vaqtning o'zida bir nechta vazifalarni bajarish qobiliyatini ta'minlash orqali siz dasturni bajarish tezligini oshirishingiz mumkin. Ammo bizda bir vaqtning o'zida tizimning bir xil qismlariga ta'sir qiladigan bir nechta harakatlar mavjud bo'lsa, dastur ularni bajarish qiyinroq bo'ladi.

Agar siz jarayonlarni ishga tushirishingiz kerak bo'lsa fon Sahifani muzlatib qo'ymasdan, brauzerlar bizga veb ishchilari deb ataladigan narsalarni taqdim etadilar. Bu asosiy dastur bilan birga hujjatda ishlaydigan va u bilan faqat xabarlarni jo‘natish va qabul qilish orqali bog‘lanishi mumkin bo‘lgan JavaScript sandboxidir.

Aytaylik, code/squareworker.js deb nomlangan faylda bizda quyidagi kod mavjud:

addEventListener("xabar", funktsiya(voqea) ( postMessage(event.data * voqea.data); ));

Tasavvur qiling-a, siz kvadratga aylantirayotgan raqam juda katta, hisoblash uchun uzoq va siz hisobni fon ipida bajarishingiz kerak. Ushbu kod veb-ishchilarni ishga tushiradi, unga ba'zi xabarlarni yuboradi va javoblarni chop etadi:

var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("xabar", funktsiya(voqea) ( console.log("Ishchi javob berdi:", event.data); )); squareWorker.postMessage(10); squareWorker.postMessage(24);

PostMessage funksiyasi qabul qiluvchida xabar hodisasini ishga tushiruvchi xabar yuboradi. Veb ishchilarini yaratgan skript Ishchi ob'ekti orqali xabarlarni yuboradi va oladi. Ushbu ob'ektdan foydalanib, muhit uni yaratgan skript bilan o'zaro ta'sir qiladi, ma'lumot yuboradi va uni global miqyosda original skript bilan tinglaydi.

Taymerlarni sozlash

setTimeout funksiyasi requestAnimationFrame funksiyasiga o'xshaydi. Keyinchalik chaqiriladigan boshqa funktsiyani chaqiradi. Ammo keyingi safar sahifa ko'rsatilganda funktsiyani chaqirish o'rniga, u ma'lum miqdordagi millisekundlarni kutadi. Unda JavaScript misoli sahifa foni ikki soniyadan keyin ko'kdan sariq rangga aylanadi:

document.body.style.background = "ko'k"; setTimeout(function() ( document.body.style.background = "sariq"; ), 2000);

Ba'zan biz rejalashtirgan funktsiyani bekor qilishimiz kerak. Bu setTimeout ning qaytish qiymatini saqlash va unga clearTimeout ni chaqirish orqali amalga oshiriladi:

var bombTimer = setTimeout(function() ( console.log("BOOM!"); ), 500); agar (Math.random()< 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }

cancelAnimationFrame funksiyasi clearTimeout bilan bir xil ishlaydi. Kadrni bekor qilish uchun requestAnimationFrame tomonidan qaytarilgan qiymat orqali chaqiriladi (agar u hali chaqirilmagan bo'lsa).

Shunga o'xshash funktsiyalar to'plami, setInterval va clearInterval amalni har X millisekundda takrorlashi kerak bo'lgan taymerni o'rnatish uchun ishlatiladi:

var ticks = 0; var clock = setInterval(function() ( console.log("belgi", ticks++); if (belgisi == 10) ( clearInterval(soat); console.log("stop."); ) ), 200);

Ajralish

Ba'zi hodisa turlari qisqa vaqt ichida ko'p marta yoqilishi mumkin (masalan, "sichqonchani siljitish" va JavaScript-ni aylantirish hodisasi). Bunday hodisalarni ko'rib chiqishda ehtiyot bo'lishingiz kerak, bu juda ko'p vaqt talab qilmaydi, aks holda ishlov beruvchi harakatni amalga oshirish uchun shunchalik uzoq vaqt talab etadiki, hujjat bilan o'zaro ta'sir sekin va sekinlashadi.

Agar siz bunday ishlov beruvchida nostandart biror narsa qilishingiz kerak bo'lsa, bu juda uzoq davom etmasligiga ishonch hosil qilish uchun setTimeout dan foydalanishingiz mumkin. Bu odatda hodisaning bo'linishi deb ataladi. Buzilishning bir necha xil yondashuvlari mavjud.

Birinchi misolda biz foydalanuvchi yozayotganda biror narsa qilishni xohlaymiz. Lekin biz buni har bir tugmani bosgandan keyin qilishni xohlamaymiz. Foydalanuvchi tezda yozayotganda, pauza bo'lguncha kutishingiz kerak. Hodisa ishlov beruvchisida amalni zudlik bilan bajarish o'rniga biz kechikishni o'rnatdik. Bundan tashqari, oldingi kechikishni (agar mavjud bo'lsa) o'chirib tashlaymiz. Agar voqealar qisqa vaqt oralig'ida sodir bo'lsa (biz o'rnatgan kechikishdan kamroq), oldingi voqeadagi kechikish bekor qilinadi:

Bu yerga biror narsa yozing... var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() ( clearTimeout(vaqt); timeout = setTimeout(function() ( console.log("Siz yozishni to'xtatdingiz."); ), 500); ));

ClearTimeout uchun aniqlanmagan qiymatni o'tkazish yoki uni allaqachon ishlayotgan kechikishda chaqirish hech qanday ta'sir qilmaydi. Biz endi uni qachon chaqirish haqida ehtiyot bo'lishimiz shart emas, biz buni har bir voqea uchun qilamiz.

Agar qisqa vaqt ichida javoblarni ajratish kerak bo'lsa, boshqa skriptdan foydalanishingiz mumkin. Ammo shu bilan birga, ular faqat undan keyin emas, balki bir qator tadbirlar davomida ishga tushirilishi kerak. Masalan, sichqonchani siljitish hodisalariga (JavaScript sichqoncha hodisalari) javoban sichqonchaning joriy koordinatalarini yuborishingiz mumkin, lekin har 250 millisekundda:

function displayCoords(event) ( document.body.textContent = "sichqoncha " + event.pageX + ", " + event.pageY; ) var scheduled = false, lastEvent; addEventListener("sichqonchani siljitish", funktsiya(voqea) ( lastEvent = voqea; agar (!rejalashtirilgan) ( rejalashtirilgan = rost; setTimeout(function() ( planlangan = noto'g'ri; displayCoords(lastEvent); ), 250); ) ));

Xulosa

Voqealar boshqaruvchilari bizga bevosita nazorat qila olmaydigan voqealarni aniqlash va ularga javob berish imkonini beradi. Bunday ishlov beruvchini ro'yxatdan o'tkazish uchun addEventListener usulidan foydalaning.

Har bir hodisa uni aniqlaydigan o'ziga xos turga ega ("tugmachani pastga tushirish", "fokus" va boshqalar). Aksariyat hodisalar ma'lum bir DOM elementida ko'tariladi va keyin elementning asosiy tugunlariga tarqaladi. Bu ushbu elementlar bilan bog'langan ishlov beruvchilarga ularni qayta ishlashga imkon beradi.

Ishlovchi chaqirilganda, unga hodisa ob'ekti uzatiladi Qo'shimcha ma'lumot harakat haqida. Ushbu ob'ekt, shuningdek, hodisaning keyingi tarqalishini to'xtatish (stopPropagation) yoki standart brauzerni hodisani qayta ishlashni oldini olish (preventDefault) usullarini o'z ichiga oladi.

Tugmachalarni bosish "tugmani pastga tushirish", "tugmachani bosish" va "tugmachani yuklash" hodisalarini yaratadi. Sichqonchani bosish "sichqonchani pastga tushirish", "sichqonchani yuqoriga ko'tarish" va "bosish" hodisalarini hosil qiladi. Sichqonchani siljitish - "sichqonchani siljitish", "sichqonchani kiritish" va "sichqonchani chiqarish".

JavaScript-ni aylantirish hodisasini "aylantirish" hodisasi yordamida aniqlash mumkin va o'zgaruvchan fokusni "fokus" va "blur" yordamida aniqlash mumkin. Hujjat yuklashni tugatgandan so'ng, oyna uchun "yuklash" hodisasi ko'tariladi.

Bir vaqtning o'zida JavaScript dasturining faqat bitta qismi ishlashi mumkin. Voqealar ishlov beruvchilari va boshqa rejalashtirilgan skriptlar navbatdagi boshqa skriptlarning bajarilishini kutishlari kerak.

Ushbu nashr do'stona loyiha jamoasi tomonidan tayyorlangan "Hodisalarni boshqarish" maqolasining tarjimasi

JavaScript voqealari

JavaScript, boshqa ob'ektga yo'naltirilgan tillar kabi, hujjat elementlari bilan bog'liq bir qator hodisalarni belgilaydi. Ishlovchilar skriptdan voqealar sodir bo'lishiga reaktsiyani tashkil qilish imkonini beradi. Bu holda HTML hujjat elementining atributi sifatida tegishli ishlov beruvchi ko'rsatiladi; bu atributning qiymati JavaScript ifodasidir. Masalan,

- sichqoncha kursorini element ustiga olib borish va harakatlantirish fon rangining o'zgarishi bilan birga keladi.

- foydalanuvchi oynani yopish va hujjatni tushirishga harakat qilganda, xabar ko'rsatiladi

- tasvirni bosganingizda ma'lum bir showPict() funksiyasi bajariladi

Ishlovchilarning yarmi deyarli barcha HTML elementlari () tomonidan qo'llab-quvvatlanadi. Ba'zi hodisalar tegishli usullar yordamida simulyatsiya qilinishi mumkin. Quyida voqealar ro'yxati keltirilgan HTML spetsifikatsiyalari 4.0 va MS IE tomonidan qo'llab-quvvatlanadigan ba'zi hodisalar. Brauzerlarning talqini ishlov beruvchining ma'lum elementlarga qo'llanilishi nuqtai nazaridan standartdan farq qilishi mumkin.

Voqea boshqaruvchisi	HTML elementlarini qo'llab-quvvatlash	Tavsif	Usul taqlid qilish
onAbort	IMG	Rasm yuklanishi to'xtatilmoqda
on Blur		Joriy element diqqatni yo'qotadi, ya'ni. boshqa elementga o'ting. Sichqoncha element tashqarisida bosilganda yoki tab tugmasi bosilganda paydo bo'ladi.	loyqalash()
onChange	KIRISH, TANGLASH, TEXTAREA	Shakl elementlarining qiymatlarini o'zgartirish. Element diqqatni yo'qotgandan so'ng paydo bo'ladi, ya'ni. xiralashgan hodisadan keyin	o'zgartirish()
onClick		Bir marta bosish (sichqoncha tugmasi bosiladi va qo'yib yuboriladi)	bosing()
onDblClick	Deyarli barcha HTML elementlari	Ikki marta bosing
onXato	IMG, WINDOW	Skriptni bajarishda xatolik yuz berdi
onFocus	A, AREA, TUGMA, KIRISH, LABEL, SELECT, TEXTAREA	Elementni fokuslash (elementni bosish yoki Tab tugmasini yana bir marta bosish)	fokus()
onKeyDown	Deyarli barcha HTML elementlari	Klaviaturada tugma bosiladi
onKeyPress	Deyarli barcha HTML elementlari	Klaviaturadagi tugma bosiladi va qo'yib yuboriladi
onKeyUp	Deyarli barcha HTML elementlari	Klaviatura tugmasi chiqarildi
yukda	BODY, FRAMESET
onMouseDown	Deyarli barcha HTML elementlari	Joriy element ichida bosilgan sichqoncha tugmasi
onMouseMove	Deyarli barcha HTML elementlari	Sichqoncha kursorini joriy element ichida harakatlantiring
onMouseOut	Deyarli barcha HTML elementlari	Sichqoncha kursori joriy elementdan tashqarida
onMouseOver	Deyarli barcha HTML elementlari	Sichqoncha kursori joriy element ustida joylashgan
onMouseUp	Deyarli barcha HTML elementlari	Joriy element ichida sichqoncha tugmasi chiqarildi
onMove	DERAZA	Oynani siljitish
onReset	FORM	Shakl ma'lumotlarini tiklash (tugmasini bosing )	qayta o'rnatish()
onResize	DERAZA	Oyna hajmini o'zgartirish
onSelect	INPUT, TEXTAREA	Joriy elementdagi matnni tanlang
onSubmit	FORM	Shakl ma'lumotlarini yuborish (tugmasini bosing )	yuborish()
onUnload	BODY, FRAMESET	Brauzer oynasini yopish va hujjatni tushirishga urinish