,
Ishlovchilar avvalgidek, lekin bu safar - suvga cho'mish bosqichida. To'xtatishni amalda ko'rish uchun undagi elementni bosing.
Ishlovchilar "yuqoridan pastgacha" tartibida o'q uzadilar: FORM → DIV → P.
Bu erda JS kodi quyidagicha:
Turli elementlar = document.querySelectorAll ("forma, div, p"); // har bir element uchun ishlov beruvchini ushlab turing (var i = 0; i< elems.length; i++) {
elems[i].addEventListener("click", highlightThis, true);
}
Hech kim sizni ikki bosqich uchun ishlovchilarni tayinlashingizga to'sqinlik qilmaydi, masalan:
Turli elementlar = document.querySelectorAll ("forma, 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
Tadbir tartibini ko'rish uchun:
Bu FORM -> DIV -> P -> P -> DIV -> FORM bo'lishi kerak. E'tibor bering, element
Har ikki bosqichda qatnashadi.
Natijalar
- Voqea sodir bo'lganda - voqea sodir bo'lgan element event.target sifatida belgilanadi.
- Hodisa avval hujjat ildizidan event.target ga o'tadi, bu yo'lda addEventListener (…., True) orqali ta'minlangan ishlovchilarni chaqiradi.
- Voqea addEventListener (…., False) orqali etkazib beruvchilarni chaqirganda, event.targetdan hujjatning boshigacha o'tadi.
Har bir ishlovchi hodisaning xususiyatlariga kira oladi:
- event.target - bu voqea sodir bo'lgan eng chuqur element.
- event.currentTarget (= bu) - o'z -o'zini boshqaruvchi hozirda ishga tushirgan element (voqea "etib kelgan").
- event.eventPhase - hodisa boshqaruvchisi qaysi bosqichda ishga tushirilgan (botish = 1, pufakchali = 3).
Pufakchani event.stopPropagation () usulini chaqirish orqali to'xtatish mumkin, lekin buni qilish tavsiya etilmaydi, chunki sizga voqea eng kutilmagan maqsadlarda kerak bo'lishi mumkin.
Voqeani ushlash
Tilning muhim xususiyatlaridan biri hodisalarni ushlab turishdir. Agar kimdir, masalan, tugmani bossa, bu tugmachaga mos keladigan onClick voqea ishlovchisi chaqiriladi. Hodisalarni boshqarish yordamida siz derazangizga, hujjatingizga yoki qatlamingizga mos keladigan ob'ekt voqea ishlovchisi ushbu tugmachani ob'ekt tomonidan chaqirilishidan oldin ham voqeani ushlab turishini va qayta ishlashini ta'minlay olasiz. Xuddi shunday, sizning oynangizdagi, hujjatingizdagi yoki sathingizdagi ob'ekt voqea signalini normal manziliga yetmasdan ham qayta ishlashi mumkin.
Bu nima uchun foydali bo'lishi mumkinligini bilish uchun quyidagi misolni ko'rib chiqaylik:
Bu havolani bosing
Ko'rib turganingizdek, biz tegda hodisalarni boshqarish dasturlarini ko'rsatmaymiz ... Buning o'rniga, biz yozamiz
window.captureEvents (Event.CLICK);
hodisani ushlab turish uchun Bosing oyna obyekti. Odatda oyna obyekti voqea bilan ishlamaydi Bosing... Biroq, ushlab turgandan so'ng, biz uni deraza ob'ektiga yo'naltiramiz. E'tibor bering Voqea. BOSING parcha BOSING bosh harflar bilan yozilishi kerak. Agar siz bir nechta hodisalarni to'xtatmoqchi bo'lsangiz, ularni bir -biridan belgilar bilan ajratib olishingiz kerak |. Masalan:
window.captureEvents (Event.CLICK | Event.MOVE);
Bundan tashqari, funktsiyada tutqich () biz voqea boshqaruvchisi vazifasini bajaruvchi tomonidan tayinlanganmiz, biz ko'rsatmalarni ishlatamiz haqiqatga qaytish;... Buning ma'nosi shundaki, funktsiya tugagandan so'ng, brauzer havolani o'zi ishlashi kerak. tutqich ()... Agar siz uning o'rniga yozsangiz noto'g'ri qaytarish; keyin hammasi shu erda tugaydi.
Agar hozir tegda bo'lsa
Siz hodisa boshqaruvchisini aniqlaysiz onClick, bu voqea sodir bo'lganda, bu dastur chaqirilmasligini tushunasiz. Buning ajablanarli joyi yo'q, chunki deraza obyekti voqea signalini havola ob'ektiga etib kelishidan oldin ham ushlaydi. Agar siz funktsiyani aniqlasangiz tutqich () Qanaqasiga
funktsiya dastasi (e) (
ogohlantirish ("Deraza obyekti bu hodisani yozib oldi!");
window.routeEvent (e);
haqiqatga qaytish;
}
keyin kompyuter bu ob'ekt uchun boshqa voqea ishlovchilarining aniqlanganligini tekshiradi. E o'zgaruvchisi - bu bizning Event ob'ekti, voqealarni boshqarish funktsiyasiga argument sifatida berilgan.
Bundan tashqari, siz ob'ektga voqea signalini to'g'ridan -to'g'ri yuborishingiz mumkin. Buning uchun siz usuldan foydalanishingiz mumkin handleEvent ()... Bu shunday ko'rinadi:
Bu havolani bosing
onClick = "alert (" Ikkinchi havola uchun voqea ishlovchisi! ");"> Ikkinchi havola
Klik voqealari haqidagi barcha signallar ikkinchi havola orqali qayta ishlash uchun yuboriladi - siz hech qanday havolani bosmagan bo'lsangiz ham!
Quyidagi skript sizning skriptingiz klaviatura signallariga qanday javob berishi mumkinligini ko'rsatadi. Kalitni bosing va skript qanday ishlashini ko'ring.
Keling, HTML -sahifa yaratib, unga yuqoridagi HTML -kodni joylashtiramiz. Keling, JavaScript -da yozilgan skriptni yopilish tanasining oldiga qo'yamiz. Shundan so'ng, veb -brauzerda yangi yaratilgan sahifani oching, F12 tugmachasini bosing va konsolga o'ting. Keling, kuchli elementga tegishli maydonni sichqonchaning chap tugmasi bilan bosamiz va voqea qanday ko'tarilishini ko'ramiz.
Voqeaning qaynab ketishini qanday to'xtatish kerak
Hodisaning (pufakchaning) puflashi to'xtatilishi mumkin. Bunday holda, bu hodisa ota -ona (ota -ona) elementlari uchun tetiklanmaydi. Pufakchali hodisani (qabariq) to'xtatish uchun mo'ljallangan usul stopPropagation () deb ataladi.
Masalan, voqea tanadan yuqoriga ko'tarilmasligi uchun yuqoridagi misolni o'zgartiraylik:
