Qalqib chiquvchi hodisalarga kirish. JavaScript-da Event obyekti bilan kengaytirilgan ishlash

Ushbu darsda biz hodisalarning ko'piklanishi tushunchasi bilan tanishamiz, shuningdek, uni qanday qilib to'xtatish mumkinligini ko'rib chiqamiz. Bundan tashqari, hodisa paydo bo'la boshlagunga qadar yana qanday bosqichlardan (bosqichlardan) o'tishini bilib olamiz.

Voqealar pufakchasi

Agar biron bir element uchun voqea sodir bo'lsa, u "qalqib chiqa boshlaydi", ya'ni. ota-onada, keyin bobo-buvida va hokazolarda uchraydi.

Bundan kelib chiqadiki, ba'zi bir element tomonidan yaratilgan hodisa uning ota-onasi, bobosi va boshqalardagi ishlov beruvchi yordamida ushlab turilishi mumkin.

Biz quyidagi misol yordamida hodisa (qabariq) paydo bo'lishini ko'rsatamiz:

Sarlavha

Juda muhim matn

Bob

Ba'zi matn

Qolgan matn

Keling, kichik skript yozaylik, uning yordamida sahifaning barcha elementlari, shuningdek, hujjat va oyna ob'ektlari uchun "klik" hodisasi ishlov beruvchisini qo'shamiz.

Keling, HTML sahifa yaratamiz va unga yuqoridagi HTML kodni joylaymiz. Skript yozilgan JavaScript, yopilish tanasi tegidan oldin kiriting. Shundan so'ng, veb-brauzerda yangi yaratilgan sahifani oching, F12 tugmasini bosing va konsolga o'ting. Keling, kuchli elementga tegishli hududda sichqonchaning chap tugmachasini bosing va voqea qanday paydo bo'lishini ko'raylik.

Hodisa ko'pirilishini qanday to'xtatish mumkin

Hodisaning ko'tarilishi (qabariq) to'xtatilishi mumkin. Bunday holda, bu hodisa yuqori (ota-ona) elementlar uchun ishga tushirilmaydi. Hodisa (qabariq) tarqalishini to'xtatish uchun mo'ljallangan usul stopPropagation() deb ataladi.

Masalan, yuqoridagi misolimizni voqea tanadan yuqoriga ko'tarilmasligi uchun o'zgartiramiz: document.addEventListener("DOMContentLoaded", function() ( var allElements = document.getElementsByTagName("*"); for (var i=0) i

Shubhasiz, sirt qoplamasi juda qulay va me'moriy shaffofdir. Agar juda zarurat bo'lmasa, uni to'xtatmang.

Ishlovchini chaqirgan elementni olish

Hodisa ishlov beruvchisi deb ataladigan DOM elementini (ob'ektini) olish uchun siz kalitdan foydalanishingiz kerak bu so'z. Berilgan kalit so'z(bu) faqat JavaScript-dan foydalanib tadbirga obuna bo'lsangiz, ishlov beruvchida mavjud.

Masalan, konsolda voqea ishlovchisini chaqirgan elementning identifikatorini ko'rsatamiz:

Var myP = document.getElementById("myP"); myP.addEventListener("click",function())( //hodisa ishlovchisini chaqirgan DOM elementini oling - bu //uning identifikatorini oling va console.log(this.id); ));

Joriy elementni olish uchun currentTarget xususiyatidan (event.currentTarget) ham foydalanishingiz mumkin.

Tadbirning bosqichlari (bosqichlari).

Hodisa paydo bo'la boshlagunga qadar (ko'tarilish bosqichi) u birinchi navbatda yana 2 bosqichdan o'tadi:

1-bosqich - hodisani yaratgan elementga botirish bosqichi. Bular. bu bosqichda yuqoridan pastgacha harakat bor, ya'ni. dan oyna obyekti elementga. Bu bosqichni tutib olish bosqichi ham deyiladi.
2-bosqich - maqsadga erishish bosqichi, ya'ni. hodisani yaratgan element (ob'ekt).

Voqea sodir bo'lgan barcha bosqichlarni hisobga olgan holda, quyidagi rasm paydo bo'ladi:

Yuqoridagi misol skriptini quyidagicha o'zgartiramiz:

Document.addEventListener("DOMContentLoaded", function() ( var allElements = document.getElementsByTagName("*"); for (var i=0; i)

AddEventListener va removeEventListener usullarining uchinchi parametri hodisa ushlanadigan bosqichni aniqlaydi. Agar bu parametr rost ga o'rnatilgan bo'lsa, hodisa hodisani immersion (to'xtatib turish) bosqichida ushlab turiladi. Va agar parametr noto'g'ri bo'lsa, hodisa ko'pikli bosqichda to'xtatiladi. Maqsadning o'zida hodisani boshqarish uchun siz addEventListener usulidan foydalanishingiz mumkin qiymat noto'g'ri, va true qiymati bilan.

Diqqat: immersion (tushib ketish) bosqichida hodisalar faqat addEventListener() usuli yordamida qo'shilgan ishlov beruvchilar tomonidan ushlab turilishi mumkin. Boshqa usullar yordamida qo'shilgan ishlov beruvchilar ( HTML atributi yoki on[event] xususiyatidan foydalangan holda JavaScript orqali) hodisalarni faqat puflash bosqichida ushlab turishi mumkin.

Hodisa yaratgan elementni olish

Maqsadli elementni olish uchun, ya'ni. hodisani yaratgan element maqsad xususiyatidan foydalanishi kerak (event.target).

Yuqoridagi misolni ko'rib chiqing, unda biz skript elementining mazmunini quyidagiga o'zgartiramiz:

Document.addEventListener("DOMContentLoaded", function() ( var elementBody = document.body; elementBody.addEventListener("click",function())( console.log(this.tagName + " - ishlov beruvchini chaqirgan element") ; console .log(event.currentTarget.tagName + " - ishlov beruvchini chaqirgan element"); console.log(event.target.tagName + " - hodisani yaratgan element"); ),false); )) ;

Keling, kuchli elementga tegishli hududni sichqonchaning chap tugmasi bilan bosish orqali misolimizni ko'rsatamiz:

Hammasi JavaScript va sinflardan foydalanish bilan boshlandi.

Biroq, menda muammo bor. Men Bubble Events deb nomlangan narsadan foydalanmoqchi edim, lekin men in'ektsiya qilishim kerak bo'lgan bog'liqliklarni minimallashtirishni ham xohladim. Men ulanishni xohlamadim jQuery kutubxonalari"Bu kichik sinov" uchun, faqat qalqib chiquvchi hodisalardan foydalanish uchun.

Keling, tost hodisalari nima ekanligini, ular qanday ishlashini va ularni amalga oshirishning bir necha usullarini batafsil ko'rib chiqaylik.

Yaxshi, muammo nimada? Keling, oddiy misolni ko'rib chiqaylik:

Aytaylik, bizda tugmalar ro'yxati bor. Har safar ulardan birini bosganimda u "faol" bo'lishi kerak. Qayta bosgandan so'ng, tugma asl holatiga qaytishi kerak.

HTML bilan boshlaylik:

Men shunga o'xshash standart JavaScript voqea ishlov beruvchisidan foydalanishim mumkin:

For(var i = 0; i< buttons.length; i++) { var button = buttons[i]; button.addEventListener("click", function() { if(!button.classList.contains("active")) button.classList.add("active"); else button.classList.remove("active"); }); }
Yaxshi ko'rinadi ... Lekin bu ishlamaydi. tomonidan kamida, biz kutgandek emas.

Yopilishlar g'alaba qozondi Bir oz funktsional JavaScript-ni biladiganlar uchun muammo aniq.

Qolganlari uchun men qisqacha tushuntiraman - ishlov berish funktsiyasi tugma o'zgaruvchisiga qulflangan. Biroq, bu bitta o'zgaruvchidir va har bir iteratsiya ustiga yoziladi.

Birinchi iteratsiyada o'zgaruvchi birinchi tugmani anglatadi. Keyingisida - ikkinchisiga va hokazo. Biroq, foydalanuvchi tugmani bosganida, tsikl allaqachon tugadi va tugma o'zgaruvchisi oxirgi tugmani anglatadi, buning uchun har doim voqea ishlov beruvchisini chaqiradi. Tartibsizlik.

Bizga har bir funktsiya uchun alohida kontekst kerak bo'ladi:

Var tugmalari = document.querySelectorAll(".asboblar paneli tugmasi"); var createToolbarButtonHandler = function(tugma) ( return function() (if(!button.classList.contains("active")) button.classList.add("active"); else button.classList.remove("faol"); );); for(var i = 0; i< buttons.length; i++) { buttons[i].addEventListener("click", createToolBarButtonHandler(buttons[i])); }
Juda yaxshi! Va eng muhimi, u to'g'ri ishlaydi. Biz voqea ishlov beruvchisini qaytaruvchi createToolbarButtonHandle funksiyasini yaratdik. Keyin har bir tugma uchun o'z ishlagichimizni biriktiramiz.

Xo'sh, muammo nimada? Bu yaxshi ko'rinadi va ishlaydi. Shunga qaramay, biz kodimizni yaxshiroq qilishimiz mumkin.

Birinchidan, biz juda ko'p ishlov beruvchilarni yaratamiz. .Toolbar ichidagi har bir tugma uchun biz funksiya yaratamiz va uni voqea ishlovchisi sifatida bog'laymiz. Uchta tugma uchun xotiradan foydalanish ahamiyatsiz.

Ammo bizda shunga o'xshash narsa bo'lsa:

keyin kompyuter, albatta, toshib ketishdan portlamaydi. Biroq, bizning xotiramizdan foydalanish idealdan uzoqdir. Biz uning katta miqdorini ajratamiz, garchi busiz ham qila olamiz. Keling, bir xil funktsiyadan bir necha marta foydalanishimiz uchun kodimizni qayta yozamiz.

Qaysi tugmani bosganimizni kuzatish uchun tugma o'zgaruvchisiga murojaat qilish o'rniga, biz har bir hodisa ishlovchisiga birinchi argument sifatida uzatiladigan voqea ob'ektidan foydalanishimiz mumkin.

Voqealar obyekti voqea haqidagi ba'zi ma'lumotlarni o'z ichiga oladi. Bizning holatda, biz joriyTarget maydoniga qiziqamiz. Undan biz bosilgan elementga havolani olamiz:

Var toolbarButtonHandler = function(e) ( var button = e.currentTarget; if(!button.classList.contains("active")) button.classList.add("active"); else button.classList.remove("active" );); for(var i = 0; i< buttons.length; i++) { button.addEventListener("click", toolbarButtonHandler); }
Ajoyib! Biz nafaqat hamma narsani bir necha marta ishlatiladigan bitta funktsiyaga qadar soddalashtirdik, balki keraksiz generator funksiyasini olib tashlash orqali kodimizni yanada o'qilishi mumkin qildik.

Biroq, biz hali ham yaxshiroq qila olamiz.

Aytaylik, kodimiz bajarilgandan so'ng biz varaqga ba'zi tugmalar qo'shdik. Keyin biz ularning har biri uchun hodisa ishlov beruvchilarini qo'shishimiz kerak. Va biz ushbu ishlov beruvchiga havolani va boshqa joylardan havolalarni saqlashimiz kerak edi. Juda jozibali ko'rinmaydi.

Ehtimol, boshqa yondashuv bormi?

Keling, voqealar qanday ishlashini va bizning DOM bo'ylab qanday harakat qilishini tushunishdan boshlaylik.

Ularning aksariyati qanday ishlaydi? Foydalanuvchi elementni bosganida, bu haqda ilovani xabardor qilish uchun voqea hosil bo'ladi. Har bir hodisaning sayohati uch bosqichda sodir bo'ladi:

Qabul qilish bosqichi

Hodisa maqsadli elementda sodir bo'ladi

Ko'tarilish bosqichi

Eslatma: barcha hodisalar to'xtatib turish yoki ko'piklanish bosqichidan o'tmaydi; ba'zilari darhol elementda yaratiladi. Biroq, bu qoidadan ko'ra istisno.

Hodisa hujjatdan tashqarida yaratiladi va keyin ketma-ket DOM ierarxiyasi orqali maqsadli elementga o'tkaziladi. Maqsadga erishgandan so'ng, voqea xuddi shu tarzda DOM elementidan olinadi.

Mana bizning HTML shablonimiz:

A tugmasi
B tugmasi
C tugmasi

Foydalanuvchi A tugmachasini bosganida, voqea quyidagicha davom etadi:

E'tibor bering, biz hodisaning maqsad elementiga erishish yo'lini kuzatishimiz mumkin. Bizning holatda, har bir bosilgan tugma uchun, voqea o'zining ota-onasi - ul elementi orqali o'tib, qayta ko'tarilishiga amin bo'lishimiz mumkin. Biz bundan foydalanishimiz va qalqib chiquvchi hodisalarni amalga oshirishimiz mumkin.

Bubble hodisalari Bubble hodisalari - bu asosiy elementga biriktirilgan, ammo ular ba'zi shartlarni qondirsagina amalga oshiriladigan hodisalar.

Aniq misol sifatida asboblar panelini olaylik:

Ul class="asboblar paneli">

Qalam

silgi

Endi biz tugmani bosish ul.toolbar elementi orqali paydo bo'lishini bilganimizdan so'ng, keling, unga hodisa ishlov beruvchimizni biriktiramiz. Yaxshiyamki, bizda allaqachon mavjud:

Var asboblar paneli = document.querySelector(".toolbar"); toolbar.addEventListener("click", function(e) ( var tugmasi = e.target; if(!button.classList.contains("active")) button.classList.add("active"); else button.classList. olib tashlash ("faol"); ));
Endi bizda ancha toza kod bor va biz hatto looplardan xalos bo'ldik! E'tibor bering, biz e.currentTarget ni e.target bilan almashtirdik. Sababi biz voqealarni boshqa darajada qayta ishlashimizdadir.

e.target hodisaning haqiqiy maqsadi bo'lib, u DOM orqali o'tadi va u qayerdan ko'tariladi.
e.currentTarget - hodisani boshqaradigan joriy element. Bizning holatda, bu ul.toolbar.

Yaxshilangan qabariq hodisalari bu daqiqa Biz ul.toolbar orqali ochiladigan har bir elementni bosish bilan ishlaymiz, ammo tekshirish shartimiz juda oddiy. Agar bizda bosish uchun mo'ljallanmagan piktogramma va elementlarni o'z ichiga olgan murakkabroq DOM bo'lsa nima bo'lar edi?

Voy! Endi biz li.separator yoki piktogramma ustiga bosganimizda, unga .active sinfini qo'shamiz. Hech bo'lmaganda, bu yaxshi emas. Bizga kerakli elementga munosabat bildirishimiz uchun hodisalarni filtrlash usuli kerak.

Buning uchun kichik yordamchi funksiya yaratamiz:

Var delegate = function(kriteria, tinglovchi) ( return function(e) ( var el = e.target; do ( if (!criteria(el)) davom eting; e.delegateTarget = el; listener.apply(bu, argumentlar); return; ) while((el = el.parentNode)); ); );
Bizning yordamchimiz ikkita vazifani bajaradi. Birinchidan, u har bir element va uning ota-onasi ustidan takrorlanadi va ular mezon parametrida o'tgan shartga javob beradimi yoki yo'qligini tekshiradi. Agar element qanoatlansa, yordamchi hodisa ob'ektiga delegateTarget deb nomlangan maydon qo'shadi, bu bizning shartlarimizni qondiradigan elementni saqlaydi. Va keyin boshqaruvchini chaqiradi. Shunga ko'ra, agar biron bir element shartni qondirmasa, hech qanday ishlov beruvchi chaqirilmaydi.

Biz buni shunday ishlatishimiz mumkin:

Var asboblar paneli = document.querySelector(".toolbar"); var buttonsFilter = function(elem) ( return elem.classList && elem.classList.contains("btn"); ); var buttonHandler = function(e) ( var button = e.delegateTarget; if(!button.classList.contains("active")) button.classList.add("active"); else button.classList.remove("faol" );); toolbar.addEventListener("klik", delegat(buttonsFilter, buttonHandler));
Shifokor buyurgan narsa: barcha ishni bajaradigan bitta elementga bitta voqea boshqaruvchisi biriktirilgan. Lekin u buni faqat bizga kerak bo'lgan elementlar uchun qiladi. Va u DOMdan ob'ektlarni qo'shish va o'chirishga mukammal javob beradi.

Xulosa Biz delegatsiya (qalqib chiquvchi oyna) tadbirlarini amalga oshirish asoslarini qisqacha ko'rib chiqdik. toza JavaScript. Bu yaxshi, chunki har bir element uchun bir nechta ishlov beruvchilarni yaratish va biriktirish shart emas.

Agar men bundan kutubxona yaratmoqchi bo'lsam yoki kodni ishlab chiqishda ishlatmoqchi bo'lsam, men bir nechta narsalarni qo'shgan bo'lardim:

Ob'ektning birlashtirilgan va funktsional shakldagi mezonlarga mos kelishini tekshirish uchun yordamchi funktsiya. Kabi:

Var mezonlari = ( isElement: function(e) (qaytish e instance of HTMLElement; ), hasClass: function(cls) ( return function(e) ( return criteria.isElement(e) && e.classList.contains(cls); ) ) //Qo'shimcha mezonlar);
Yordamchidan qisman foydalanish ham foydali bo'ladi:

Var partialDelgate = funktsiya(kriteria) ( qaytaruvchi funksiya(ishlovchi) ( qaytaruvchi delgate(mezon, ishlov beruvchi); ) );
Asl maqola: Delegatsiya qilingan JavaScript hodisalarini tushunish
(Tarjimondan: mening birinchi, qat'iy hukm qilaman.)

Baxtli kodlash!

Voqealar - bu siz dasturlayotgan tizimda sodir bo'ladigan harakatlar yoki hodisalar bo'lib, ular haqida tizim sizga aytadi, agar xohlasangiz, ularga qandaydir tarzda javob berishingiz mumkin. Misol uchun, agar foydalanuvchi veb-sahifadagi tugmani bosgan bo'lsa, siz ma'lumot oynasini ko'rsatish orqali ushbu harakatga javob berishni xohlashingiz mumkin. Ushbu maqolada biz voqealar bilan bog'liq ba'zi muhim tushunchalarni muhokama qilamiz va ularning brauzerlarda qanday ishlashini ko'rib chiqamiz. Bu to'liq tadqiqot bo'lmaydi; faqat nima senga kerak bu bosqichda bilish.

Old shartlar: Maqsad:

Asosiy kompyuter savodxonligi, HTML va CSS-ning asosiy tushunchasi, JavaScript-ning dastlabki qadamlari.

Hodisalarning asosiy nazariyasini, ular brauzerlarda qanday ishlashini va turli dasturlash muhitlarida voqealar qanday farqlanishini tushunish uchun.

Baxtli voqealar seriyasi

Yuqorida aytib o'tilganidek, hodisalar bu siz dasturlayotgan tizimda sodir bo'ladigan harakatlar yoki hodisalardir - tizim voqea sodir bo'lganda qandaydir signal ishlab chiqaradi (yoki "yong'in" qiladi), shuningdek, qandaydir harakatlarni amalga oshirish mexanizmini ta'minlaydi. voqea sodir bo'lganda avtomatik ravishda olinadi (ya'ni, ba'zi kod ishlaydi). Masalan, aeroportda uchish-qo'nish yo'lagi uchish uchun ochiq bo'lsa, uchuvchiga signal beriladi va natijada ular samolyotni boshqarishni boshlaydilar.

Internetga kelsak, voqealar brauzer oynasida ishga tushiriladi va odatda unda joylashgan ma'lum bir elementga biriktiriladi - bu bitta element, elementlar to'plami, joriy yorliqda yuklangan HTML hujjati yoki bo'lishi mumkin. butun brauzer oynasi. Turli xil hodisalar ro'y berishi mumkin, masalan:

Foydalanuvchi sichqonchani ma'lum bir element ustiga bosadi yoki kursorni ma'lum bir element ustiga olib boradi.
Foydalanuvchi klaviaturadagi tugmachani bosadi.
Foydalanuvchi brauzer oynasining o'lchamini o'zgartiradi yoki yopadi.
Shakl topshirilmoqda.
Video ijro etilayotgan, to‘xtatilgan yoki ijro etilayotgan video.
Xatolik yuz berdi.

Siz bundan (va MDN Event ma'lumotnomasiga qarashdan) javob berish mumkin bo'lgan juda ko'p voqealar mavjudligini to'plashingiz mumkin.

Har bir mavjud hodisada voqea sodir bo'lganda ishga tushadigan kod bloki (odatda dasturchi sifatida yaratadigan JavaScript funksiyasi) bo'lgan voqea ishlov beruvchisi mavjud. Agar bunday kod bloki hodisani ishga tushirishga javoban ishga tushirilishi aniqlansa, biz voqea ishlov beruvchisini ro'yxatdan o'tkazyapmiz deymiz. E'tibor bering, hodisani qayta ishlovchilar ba'zan hodisa tinglovchilari deb ataladi - ular bizning maqsadlarimiz uchun deyarli bir-birini almashtiradi, garchi qat'iy aytganda, ular birgalikda ishlaydi. Tinglovchi voqea sodir bo'lishini tinglaydi va ishlov beruvchi - bu sodir bo'layotganiga javoban ishlaydigan kod.

Eslatma: Veb-hodisalar asosiy JavaScript tilining bir qismi emas - ular brauzerga o'rnatilgan API-larning bir qismi sifatida aniqlanadi.

Oddiy misol

Keling, bu erda nimani nazarda tutayotganimizni tushuntirish uchun oddiy misolni ko'rib chiqaylik. Siz allaqachon ushbu kursdagi ko'plab misollarda qo'llanilgan voqealar va hodisalarni boshqarish vositalarini ko'rgansiz, lekin keling, bilimimizni mustahkamlash uchun takrorlaymiz. Quyidagi misolda bizda single , bosilganda fonni tasodifiy rangga o'zgartiradi:

Rangni o'zgartirish

Tugma (chegara: 10px );

JavaScript shunday ko'rinadi:

Const btn = document.querySelector("tugma"); funksiya tasodifiy(raqam) ( Math.floor(Math.random() * (raqam+1)); ) btn.onclick = function() ( const rndCol = "rgb(" + tasodifiy(255) + "," + tasodifiy(255) + "," + tasodifiy(255) + ")"; document.body.style.backgroundColor = rndCol; )

Ushbu kodda Document.querySelector() funksiyasidan foydalanib, tugmachaga havolani btn deb nomlangan konstanta ichida saqlaymiz. Shuningdek, biz tasodifiy sonni qaytaradigan funktsiyani aniqlaymiz. Kodning uchinchi qismi voqea ishlovchisidir. btn doimiysi elementga ishora qiladi va bu turdagi ob'ektda yonishi mumkin bo'lgan bir qator hodisalar mavjud va shuning uchun hodisalarni qayta ishlash vositalari mavjud. Biz onclick hodisasini qayta ishlash xususiyatini tasodifiy RGB rangini yaratuvchi va fon rangini unga tenglashtiradigan kodni o'z ichiga olgan anonim funksiyaga tenglashtirib, klik hodisasini ishga tushirishni tinglaymiz.

Ushbu kod elementni bosish hodisasi ishga tushirilganda, ya'ni foydalanuvchi uni bosganda ishga tushiriladi.

Chiqish misoli quyidagicha:

Bu shunchaki veb-sahifalar emas

Shu o‘rinda yana bir narsani eslatib o‘tish joizki, hodisalar JavaScript-ga xos emas – ko‘pchilik dasturlash tillarida qandaydir hodisa modeli mavjud va modelning ishlash usuli ko‘pincha JavaScript usulidan farq qiladi. Aslida, JavaScript-dagi hodisa modeli. veb-sahifalar uchun JavaScript uchun hodisa modelidan farq qiladi, chunki u boshqa muhitlarda qo'llaniladi.

Inline hodisa ishlov beruvchilari - ulardan foydalanmang

Kodingizda shunga o'xshash naqshni ham ko'rishingiz mumkin:

Menga bgChange() funksiyasini bosing ( const rndCol = "rgb(" + tasodifiy(255) + "," + tasodifiy(255) + "," + tasodifiy(255) + ")"; document.body.style.backgroundColor = rndCol;)

Vebda topilgan hodisa ishlov beruvchilarini roʻyxatdan oʻtkazishning eng dastlabki usuli yuqorida koʻrsatilganiga oʻxshash hodisa ishlov beruvchi HTML atributlarini (yoki inline voqea ishlov beruvchilarini) oʻz ichiga oladi – atribut qiymati tom maʼnoda hodisa sodir boʻlganda ishga tushirmoqchi boʻlgan JavaScript kodidir. Yuqoridagi misol xuddi shu sahifadagi element ichida aniqlangan funktsiyani chaqiradi, lekin siz JavaScript-ni to'g'ridan-to'g'ri atribut ichiga kiritishingiz mumkin, masalan:

Meni bosing

Hodisalarni qayta ishlash xususiyatlarining ko'pchiligi uchun HTML atribut ekvivalentlarini topishingiz mumkin; lekin siz ulardan foydalanmasligingiz kerak - ular noto'g'ri amaliyot deb hisoblanadi.Agar siz biron bir ishni tezda bajarayotgan bo'lsangiz, hodisani qayta ishlash atributidan foydalanish oson bo'lib tuyulishi mumkin, lekin ular tezda boshqarib bo'lmaydigan va samarasiz bo'lib qoladi.

Boshlash uchun HTML va JavaScript-ni aralashtirish yaxshi fikr emas, chunki uni tahlil qilish qiyinlashadi - JavaScript-ni bir joyda saqlash yaxshiroqdir; agar u alohida faylda bo'lsa, uni bir nechta HTML hujjatlariga qo'llashingiz mumkin.

Hatto bitta faylda ham inline hodisalarni ishlovchilar yaxshi fikr emas. Bitta tugma yaxshi, lekin sizda 100 ta tugma bo'lsa nima bo'ladi? Siz faylga 100 ta atribut qo'shishingiz kerak bo'ladi; u juda tez texnik xizmatga aylanadi. JavaScript yordamida sahifadagi tugmalar soni qancha bo'lishidan qat'iy nazar, shunga o'xshash biror narsadan foydalanib, voqealarni boshqarish funktsiyasini osongina qo'shishingiz mumkin. bu:

Const tugmalari = document.querySelectorAll("tugma"); uchun (i = 0; i< buttons.length; i++) { buttons[i].onclick = bgChange; } buttons.forEach(function(button) { button.onclick = bgChange; });

Eslatma: Dasturlash mantiqini tarkibingizdan ajratish ham saytingizni qidiruv tizimlari uchun qulayroq qiladi.

addEventListener() va removeEventListener()

Hodisa mexanizmining eng yangi turi Document Object Model (DOM) 2-darajali hodisalar spetsifikatsiyasida aniqlangan bo'lib, u brauzerlarni yangi funksiya bilan ta'minlaydi - addEventListener() . Bu hodisa ishlov beruvchisi xususiyatlariga o'xshash tarzda ishlaydi, ammo sintaksis aniq boshqacha. Biz tasodifiy rang misolimizni shunday ko'rinish uchun qayta yozishimiz mumkin:

Const btn = document.querySelector("tugma"); funktsiya bgChange() ( const rndCol = "rgb(" + tasodifiy(255) + "," + tasodifiy(255) + "," + tasodifiy(255) + ")"; document.body.style.backgroundColor = rndCol; ) btn.addEventListener("klik", bgChange);

addEventListener() funktsiyasi ichida biz ikkita parametrni belgilaymiz - biz ushbu ishlov beruvchini ro'yxatdan o'tkazmoqchi bo'lgan voqea nomini va unga javob sifatida ishga tushirmoqchi bo'lgan ishlov beruvchi funktsiyasini o'z ichiga olgan kodni. E'tibor bering, barcha kodlarni addEventListener() funksiyasi ichidagi anonim funksiyaga qo'yish juda mos keladi, masalan:

Btn.addEventListener("click", function() ( var rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body .style.backgroundColor = rndCol; ));

Ushbu mexanizm ilgari muhokama qilingan eski mexanizmlarga nisbatan bir qator afzalliklarga ega. Avval qo'shilgan tinglovchini olib tashlaydigan removeEventListener() funksiyasi mavjud. Misol uchun, bu ushbu bo'limdagi birinchi kod blokidagi tinglovchilar to'plamini olib tashlaydi:

Btn.removeEventListener("klik", bgChange);

Bu oddiy, kichik dasturlar uchun ahamiyatli emas, lekin kattaroq, murakkabroq dasturlar uchun eski foydalanilmagan hodisa ishlov beruvchilarini tozalash samaradorligini oshirishi mumkin.Bundan tashqari, masalan, bu sizga turli vaziyatlarda turli amallarni bajaradigan bir xil tugmachaga ega bo'lish imkonini beradi - siz qilishingiz kerak bo'lgan narsa, tegishli ravishda hodisa ishlov beruvchilarini qo'shish yoki olib tashlashdir.

Ikkinchidan, siz bir xil tinglovchi uchun bir nechta ishlov beruvchilarni ro'yxatdan o'tkazishingiz mumkin. Quyidagi ikkita ishlov beruvchining ikkalasi ham qo'llanilmaydi:

MyElement.onclick = functionA; myElement.onclick = functionB;

Ikkinchi satr birinchi qator tomonidan o'rnatilgan onclick qiymatini qayta yozadi. Biroq, bu ishlaydi:

MyElement.addEventListener("klik", funktsiyaA); myElement.addEventListener("klik", funktsiyaB);

Element bosilganda ikkala funksiya ham ishga tushadi.

Bundan tashqari, ushbu hodisa mexanizmi bilan boshqa bir qator kuchli xususiyatlar va imkoniyatlar mavjud. Bular ushbu maqola doirasidan tashqarida, lekin agar siz ularni oʻqishni istasangiz, addEventListener() va removeEventListener() maʼlumot sahifalarini koʻrib chiqing.

Qanday mexanizmdan foydalanishim kerak?

Uch mexanizmdan, albatta, HTML hodisalarni qayta ishlash atributlaridan foydalanmasligingiz kerak - bular eskirgan va yuqorida aytib o'tilganidek, yomon amaliyotdir.

Qolgan ikkitasi nisbatan bir-birini almashtiradi, hech bo'lmaganda oddiy foydalanish uchun:

Voqealar boshqaruvchisining xususiyatlari kamroq quvvat va imkoniyatlarga ega, ammo brauzerlar o'rtasidagi mosligi yaxshiroq (qadimdan qo'llab-quvvatlanadi) Internet Explorer 8). Ehtimol, siz o'rganayotganda shulardan boshlashingiz kerak.
DOM 2-darajali hodisalari (addEventListener() va h.k.) kuchliroq, lekin ular yanada murakkablashishi mumkin va unchalik qoʻllab-quvvatlanmaydi (Internet Explorer 9 da qoʻllab-quvvatlanadi). Siz ham ular bilan tajriba o'tkazishingiz kerak va iloji boricha ulardan foydalanishga intiling.

Uchinchi mexanizmning asosiy afzalliklari shundan iboratki, agar kerak bo'lsa, removeEventListener() dan foydalanib, hodisalarni qayta ishlash kodini olib tashlashingiz mumkin va agar kerak bo'lsa, elementlarga bir xil turdagi bir nechta tinglovchilarni qo'shishingiz mumkin. Masalan, ikkinchi argumentda turli funktsiyalar ko'rsatilgan elementda addEventListener("click", function() ( ... )) ni bir necha marta chaqirishingiz mumkin. Hodisa ishlov beruvchisi xususiyatlari bilan buni amalga oshirish mumkin emas, chunki xususiyatni o'rnatishga keyingi urinishlar avvalgilarining ustiga yoziladi, masalan:

Element.onclick = function1; element.onclick = function2; va boshqalar.

Eslatma: Agar ishingizda Internet Explorer 8 dan eski brauzerlarni qo'llab-quvvatlashga chaqirilsa, siz qiyinchiliklarga duch kelishingiz mumkin, chunki bunday qadimgi brauzerlar yangi brauzerlarning turli hodisa modellaridan foydalanadilar. Lekin hech qachon qo'rqmang, ko'pgina JavaScript kutubxonalari (masalan, jQuery) brauzerlar orasidagi farqlarni yo'q qiladigan o'rnatilgan funktsiyalarga ega. O'quv sayohatingizning ushbu bosqichida bu haqda juda ko'p tashvishlanmang.

Boshqa hodisalar tushunchalari

Ushbu bo'limda biz voqealarga tegishli bo'lgan ba'zi ilg'or tushunchalarni qisqacha yoritamiz. Hozirgi vaqtda ushbu tushunchalarni to'liq tushunish muhim emas, lekin ular vaqti-vaqti bilan duch keladigan ba'zi kod naqshlarini tushuntirishga xizmat qilishi mumkin.

Hodisa ob'ektlari

Ba'zan hodisani qayta ishlash funksiyasi ichida siz event , evt yoki oddiygina e kabi nom bilan belgilangan parametrni ko'rishingiz mumkin. Bu hodisa ob'ekti deb ataladi va u qo'shimcha funktsiyalar va ma'lumotlarni taqdim etish uchun avtomatik ravishda voqea ishlov beruvchilariga uzatiladi. Masalan, tasodifiy rang misolimizni yana bir oz qayta yozamiz:

Funktsiya bgChange(e) ( const rndCol = "rgb(" + tasodifiy(255) + "," + tasodifiy(255) + "," + tasodifiy(255) + ")"; e.target.style.backgroundColor = rndCol ; console.log(e); ) btn.addEventListener("klik", bgChange);

Bu yerda biz e.target-da fon rangi uslubini oʻrnatish funksiyasiga va funksiyaga hodisa obyektini kiritayotganimizni koʻrishingiz mumkin, bu tugmaning oʻzi. Hodisa ob'ektining maqsad xususiyati har doim voqea sodir bo'lgan elementga havola bo'ladi. Shunday qilib, ushbu misolda biz sahifaga emas, balki tugmachaga tasodifiy fon rangini o'rnatamiz.

Eslatma: Hodisa ob'ekti uchun o'zingizga yoqqan har qanday nomdan foydalanishingiz mumkin - shunchaki nomni tanlashingiz kerak, undan keyin voqea ishlov beruvchisi funksiyasi ichida unga murojaat qilish uchun foydalanishingiz mumkin. e/evt/event eng ko'p ishlab chiquvchilar tomonidan qo'llaniladi, chunki ular qisqa va eslab qolish oson. Izchil bo'lish har doim yaxshi - o'zingiz bilan va iloji bo'lsa, boshqalar bilan.

Agar bir nechta elementlarga bir xil hodisa ishlov beruvchisini o'rnatmoqchi bo'lsangiz va ularda voqea sodir bo'lganda ularning barchasiga biror narsa qilishni xohlasangiz e.target juda foydali. Masalan, sizda 16 ta plitkalar to'plami bo'lishi mumkin, ular bosilganda yo'qoladi. Har doim biror narsani qiyinroq usulda tanlashdan ko'ra, faqat e.target sifatida yo'qolishini o'rnatish foydali bo'ladi. Quyidagi misolda (toʻliq manba kodi uchun foydali-eventtarget.html ga qarang; uning jonli ishlashini ham shu yerda koʻring), biz JavaScript yordamida 16 ta element yaratamiz. Keyin biz hujjat.querySelectorAll() yordamida ularning barchasini tanlaymiz, so‘ngra har birini aylanib o‘tamiz va har biriga onclick ishlov beruvchisini qo‘shamiz, bu esa bosilganda har biriga tasodifiy rang qo‘llanilishini ta’minlaydi:

Const divs = document.querySelectorAll("div"); uchun (i = 0; i< divs.length; i++) { divs[i].onclick = function(e) { e.target.style.backgroundColor = bgChange(); } }

Chiqish quyidagicha (uni bosishga harakat qiling - zavqlaning):

Yashirin misol Foydali hodisa maqsadi misoli div (balandlik: 100px; kenglik: 25%; float: chap; ) uchun (let i = 1; i)

Qalam

silgi

Endi biz tugmani bosish ul.toolbar elementi orqali paydo bo'lishini bilganimizdan so'ng, keling, unga hodisa ishlov beruvchimizni biriktiramiz. Yaxshiyamki, bizda allaqachon mavjud:

e.target hodisaning haqiqiy maqsadi bo'lib, u DOM orqali o'tadi va u qayerdan ko'tariladi.
e.currentTarget - hodisani boshqaradigan joriy element. Bizning holatda, bu ul.toolbar.

Yaxshilangan qalqib chiquvchi hodisalar Hozirda biz ul.toolbar orqali ochiladigan har bir elementga istalgan bosish bilan ishlaymiz, biroq bizning tekshirish shartimiz juda oddiy. Agar bizda bosish uchun mo'ljallanmagan piktogramma va elementlarni o'z ichiga olgan murakkabroq DOM bo'lsa nima bo'lar edi?

Buning uchun kichik yordamchi funksiya yaratamiz:

Biz buni shunday ishlatishimiz mumkin:

Xulosa Biz sof JavaScript-da delegatsiya (qalqib chiquvchi oyna) hodisalarini amalga oshirish asoslarini qisqacha ko'rib chiqdik. Bu yaxshi, chunki har bir element uchun bir nechta ishlov beruvchilarni yaratish va biriktirish shart emas.

Agar men bundan kutubxona yaratmoqchi bo'lsam yoki kodni ishlab chiqishda ishlatmoqchi bo'lsam, men bir nechta narsalarni qo'shgan bo'lardim:

Ob'ektning birlashtirilgan va funktsional shakldagi mezonlarga mos kelishini tekshirish uchun yordamchi funktsiya. Kabi:

Baxtli kodlash!

Salom! Ushbu darsda men voqealarni yuzaga chiqarish va ushlab turish kabi muhim tushuncha haqida gapirmoqchiman. Ko'piklanish - bu hodisa bo'lib, agar siz bola elementni bossangiz, voqea uning ota-onasiga tarqaladi.

Har bir elementga hodisa ishlov beruvchisini tayinlamaslik uchun katta ichki o'rnatilgan ro'yxatlar yoki jadvallarni qayta ishlashda juda foydali bo'lishi mumkin, siz asosiy elementga bitta ishlov beruvchini belgilashingiz mumkin va hodisa allaqachon ota-onadagi barcha ichki o'rnatilgan elementlarga tarqaladi. Keling, bir misolni ko'rib chiqaylik.

Agar siz pastki tegni yoki quyidagini bossangiz, ushbu ishlov beruvchi ishga tushadi:

EM-ni bosing, DIV-dagi ishlov beruvchi ishlaydi

Ko'rib turganingizdek, ichki o'rnatilgan em elementni bosganingizda, divdagi ishlov beruvchi ishga tushadi. Nima uchun bu sodir bo'lmoqda? O'qing va bilib oling.

Ko'tarilish

Shunday qilib, ko'tarilishning asosiy printsipi:

Har qanday hodisa sodir bo'lganda, sichqonchani biror elementga bosish muhim emas, voqea birinchi navbatda asosiy elementda yonadi, keyin esa zanjir bo'ylab u barcha ichki o'rnatilgan elementlarga tarqaladi.

Masalan, FORM > DIV > P bo‘lgan 3 ta ichki element mavjud bo‘lib, ularning har birida hodisa ishlov beruvchisi bor deylik:

tana * ( hoshiya: 10px; hoshiya: 1px toʻliq koʻk; ) FORM DIV

Bubbling ichki elementni bosishni ta'minlaydi

Haqiqiyda birinchi bo'lib bosish ishlovchisini (albatta mavjud bo'lsa) chaqiradi

Bu jarayon ko'tarilish deb ataladi, chunki hodisalar ichki elementdan ota-onalari orqali yuqoriga qarab "yuqoriga suzadi", xuddi havo pufakchasi suvda suzayotgani kabi, siz ko'pikning ta'rifini ham topishingiz mumkin, xolos, bu ingliz tilidan olingan. so'z ko'pirmoq - suzib yurmoq.

Maqsad elementiga kirish voqea.target

U yoki bu hodisani qaysi elementda tutganimizni bilish uchun event.target usuli mavjud. (hodisa ob'ekti haqida o'qing).

event.target - voqea sodir bo'lgan haqiqiy manba elementi.
bu har doim pufakchaga erishgan joriy element va ishlov beruvchi hozirda uning ustida ishlamoqda.

Misol uchun, agar sizda faqat bitta form.onclick ishlov beruvchisi o'rnatilgan bo'lsa, u forma ichidagi barcha bosishlarni "ushlaydi". Bundan tashqari, bosish qaerda bo'lishidan qat'iy nazar, u ishlov beruvchi ishlaydigan elementga ochiladi.

Bunda:

bu (=event.currentTarget) har doim shaklning o'zi bo'ladi, chunki ishlov beruvchi unda ishga tushirilgan.
event.target formadagi ma'lum bir elementga havolani o'z ichiga oladi, bosish sodir bo'lgan eng ko'p joylashtirilgan.

Printsipial jihatdan, agar forma bosilsa va formada boshqa elementlar bo'lmasa, bu event.target bilan mos kelishi mumkin.

Ko'tarilishni to'xtatish

Odatda, hodisa pufakchasi to'g'ridan-to'g'ri tepaga chiqadi va ildiz oynasi ob'ektiga etib boradi.

Ammo ba'zi bir oraliq elementda ko'tarilishni to'xtatish mumkin.

Tarqatishni to'xtatish uchun siz event.stopPropagation() usulini chaqirishingiz kerak.

Misolni ko'rib chiqamiz: tugma bosilganda body.onclick ishlov beruvchisi ishlamaydi:

Meni bosing

Agar elementda bir xil hodisa uchun bir nechta ishlov beruvchilar o'rnatilgan bo'lsa, hatto pufaklash to'xtasa ham, ularning barchasi bajariladi.

Shunday qilib, stopPropagation hodisaning yanada tarqalishini oldini oladi, lekin barcha ishlov beruvchilar element ustida ishlaydi, lekin keyingi elementda emas.

Joriy elementda ishlov berishni to'xtatish uchun brauzerlar event.stopImmediatePropagation() usulini qo'llab-quvvatlaydi. Bu usul nafaqat ko'pikni oldini oladi, balki joriy elementda hodisalarni qayta ishlashni ham to'xtatadi.

Sho'ng'in

Standartda, voqealarning "ko'tarilishi" dan tashqari, "sho'ng'in" ham mavjud.

Sho'ng'in, ko'tarilishdan farqli o'laroq, talab kamroq, ammo bu haqda bilish hali ham foydali bo'ladi.

Shunday qilib, tadbirning 3 bosqichi mavjud:

Hodisa yuqoridan pastgacha keladi. Ushbu bosqich "tushish bosqichi" deb ataladi.

Tadbir ma'lum bir elementga yetdi. Bu "maqsad bosqichi".

Har bir narsadan keyin hodisa paydo bo'la boshlaydi. Bu "ko'tarilish bosqichi".

Bu standartda quyidagicha ko'rsatilgan:

Shunday qilib, siz TD ni bosganingizda, voqea ota-onalar zanjiri bo'ylab, avval elementga ("cho'kish"), keyin esa yo'lda mos ravishda ishlov beruvchilardan foydalangan holda yuqoriga ("ochiladi") boradi.

Yuqorida men faqat ko'tarilish haqida yozdim, chunki boshqa bosqichlar ishlatilmaydi va bizga e'tibor bermasdan o'tadi.

Ishlovchilar ushlab turish bosqichi haqida hech narsa bilishmaydi, lekin ko'tarilishdan ishlashni boshlaydilar.

Va voqeani ushlab turish bosqichida ushlab turish uchun siz shunchaki foydalanishingiz kerak:

Bahs to'g'ri, keyin hodisa pastga tushayotganda to'xtatiladi.
Bahs noto'g'ri bo'lsa, u holda hodisa ko'piklanganda ushlanadi.

Misollar

Misolda , ,

Protsessorlar avvalgidek, lekin bu safar suvga cho'mish bosqichida. Xo'sh, ushlab turishni amalda ko'rish uchun undagi elementni bosing

Ishlovchilar yuqoridan pastga qarab ishlaydi: FORM → DIV → P.

JS kodi bu erda:

Var elems = document.querySelectorAll("form,div,p"); // (var i = 0; i.) uchun ushlab turish bosqichida har bir elementga ishlov beruvchi biriktiring< elems.length; i++) { elems[i].addEventListener("click", highlightThis, true); }

Hech kim sizni ikkala bosqich uchun ishlovchilarni tayinlashingizga to'sqinlik qilmaydi, masalan:

Var elems = document.querySelectorAll("form,div,p"); uchun (var i = 0; i< elems.length; i++) { elems[i].addEventListener("click", highlightThis, true); elems[i].addEventListener("click", highlightThis, false); }

Ichki elementni bosing

Tadbirlar tartibini ko'rish uchun:
U FORM → DIV → P → P → DIV → FORM bo‘lishi kerak. E'tibor bering, element

Ikkala bosqichda ham ishtirok etadi.

Natijalar

Voqea sodir bo'lganda, voqea sodir bo'lgan element voqea.target sifatida belgilanadi.
Voqea avval hujjat ildizidan event.target ga oʻtadi va addEventListener (…., true) orqali taʼminlangan ishlovchilarni chaqiradi.
Voqea event.target dan hujjatning boshigacha o'tadi va u addEventListener (...., false) orqali taqdim etilgan ishlov beruvchilarni chaqiradi.

Har bir ishlov beruvchi hodisa xususiyatlariga kirish huquqiga ega bo'ladi:

event.target - voqea haqiqatda sodir bo'lgan eng chuqur element.
event.currentTarget (=this) – o‘z-o‘zidan ishlov beruvchi hozirda ishga tushirilgan element (hodisa “etib olgan”).
event.eventPhase – voqea ishlov beruvchisi qaysi bosqichda ishga tushirildi (sho'ng'in = 1, ko'tarilish = 3).

Tarqatishni event.stopPropagation() usulini chaqirish orqali to'xtatish mumkin, ammo bu tavsiya etilmaydi, chunki sizga hodisa eng kutilmagan maqsadlarda kerak bo'lishi mumkin.