Notikumu burbuļošana un notikumu tveršana JavaScript valodā: viss, kas jums jāzina



Šis emuārs sniegs padziļinātas zināšanas par notikumu burbuļošanu un notikumu fiksēšanu javascript. Tajā tiks sniegta informācija par abu darbu un izmantošanu.

Notikumu burbuļošana un Notikumu tveršana ir visizplatītākie JavaScript termini notikumu plūsmas laikā. Šie ir divi notikumu izplatīšanas veidi HTML DOM API. Šajā rakstā par notikumu burbuļošanu un notikumu tveršanu JavaScript detalizēti tiks aprakstīts, kāpēc mēs tos pieprasām šādā secībā:

datu struktūras un algoritmi Java apmācībā

Kas ir notikumu burbuļošana JavaScript?

Notikumu burbuļošana ir termins, ar kuru cilvēkiem jāsaskaras, izstrādājot tīmekļa lietojumprogrammu vai tīmekļa lapu . Būtībā notikumu burbuļošana ir paņēmiens, kurā tiek izsaukti notikumu apstrādātāji, kad viens vienums ir ligzdots pie cita vienuma un tam jābūt no tā paša notikuma. Tas ir līdzīgs iekapsulēšanai.





notikumu burbuļošana - pasākumu burbuļošana un notikumu tveršana JavaScript- edureka

Notikumu burbuļošana ir tikai neliela daļa notikumu apstrādes JavaScript. Lai to labāk saprastu, mums jāzina par pasākumu izplatīšanu un to, kā tas atbalsta pasākumu burbuļošanu.



Kas ir notikumu izplatīšana?

Notikumu pavairošanu var salīdzināt kā vecāku terminu ar notikumu burbuļošanu un tveršanu kā tā bērnu.Tas tiek attēlots šādi:

 

Noklikšķinot uz jebkura attēla, tas ne tikai radīs klikšķa notikumu, bet arī vecākam “a” un vectēvam “li”. Tādā veidā notiek funkcijas izplatīšanās. Šeit attēls tiek uzskatīts par bērnu, un tas ir notikuma mērķis, kurā tiek ģenerēts klikšķis. Attēls kopā ar senčiem koku terminoloģijā veido zaru. Zars ir svarīgs, kad mēs uzzinām ceļu, pa kuru notikums izplatās.



Katrs no klausītājiem tiek izsaukts ar notikuma objektu, kas attiecīgi apkopo informāciju par notikumu. Šī izplatīšana ir ļoti svarīga, jo mēs iepazinām visu klausītāju izsaukšanas procesu attiecīgajā pasākumā. No augšējā attēla mēs varam pamanīt, ka filiāles noteikšana ir statiska. Visas koka modifikācijas, kas notiek notikuma laikā, tiek ignorētas. Šeit izplatīšanās ir divvirzienu, tas ir, tas iet no loga uz notikuma mērķi un atgriežas. Šeit izplatīšanās tiek plaši iedalīta trīs galvenajos veidos. Tie ir:

  1. Uzņemšanas fāze: Pāreja no loga uz notikuma mērķa fāzi.
  2. Mērķa fāze: Tā ir mērķa fāze.
  3. Burbuļa fāze: No notikuma mērķa vecākiem atgriezieties logā.

Kas ir notikumu tveršana?

Šajā posmā tiek saukti klausītāji, kuru vērtība ir reģistrēta kā “patiesa”. Tas ir rakstīts kā:

el.addEventListener ('klikšķis', klausītājs, patiess)

Šeit klausītāja vērtība ir reģistrēta kā “patiesa”, tāpēc šis notikums tiek tverts. Ja vērtības nebūtu, vērtība pēc noklusējuma būtu nepatiesa un notikums netiktu uztverts. Tātad šajā fāzē notikums, kura vērtība ir patiesa, tikai atrod ceļu pa logu un tiek izsaukts un notverts.

Pēc tam pasākuma mērķa fāzē visi reģistrētie klausītāji tiek izsaukti neatkarīgi no karoga statusa, kas ir patiess vai nepatiess.

Pasākumu burbuļošanas un notikumu tveršanas izmantošana JavaScript

Burbuļošanas fāzē tiek izsaukts tikai tas, kurš nav uztvērējs, tas ir, notikumi, kuriem karoga vērtība ir “nepatiesa”. Notikumu burbuļošana un notikumu tveršana ir ļoti noderīga un svarīga DOM (Document Object Model) terminoloģijā.

el.addEventListener ('klikšķis', klausītājs, nepatiesa) // klausītājs neuztver el.addEventListener ('klikšķis', klausītājs) // klausītājs neuztver

Virs koda gabala parādīta burbuļošanas un uztveršanas fāzes darbība. Ne visi notikumi iet uz notikuma mērķi. Daži no viņiem nav burbuļoti. Viņu ceļojums apstājas pēc mērķa fāzes. Trīs notikumu fāzes plūsma ir parādīta šajā diagrammā:

Notikumu burbuļošana nedarbojas visu veidu pasākumos, tomēr klausītājam ir jābūt '.burbulis ”Notikuma objekta Būla rekvizīts. Dažas citas īpašības ietver:

  1. e. mērķis: kas atsaucas uz notikuma mērķi.
  2. e.currentTarget: tas ir režīms, kurā pašreizējie klausītāji ir reģistrēti. Šeit uz vērtību atsaucas, izmantojot šo atslēgvārds.
  3. e.eventPhase: Tas ir vesels skaitlis, kas attiecas uz citiem trim atslēgvārdiem, piemēram, Capturing_phase, Bubbling_phase, AT_Target fāze.

Darba kārtība

Apskatīsim tuvāk iepriekš redzamajā attēlā. Noklikšķināsim uz elementa “buttonOne” un tūlīt tiks aktivizēts notikums. Parasti notikums sāk savu ceļu no saknes, kas ir koka augšējais elements. Tad tas seko kokam mērķa notikumam, kas ir “buttonOne”. Lūk, kā tas ceļo:

Kā parādīts attēlā, notikums iekļūst DOM terminoloģijā, sasniedzot mērķa notikumu beigās. Tagad, kad pasākums sasniedz mērķi, tas nebeidzas. Tas turpinās un turpinās DOM terminoloģijās, kā parādīts zemāk redzamajā attēlā.

Tāpat kā iepriekš, ikviens notikuma ceļa elements, virzoties uz augšu, tiek informēts par tā esamību. Šādi turpinoties, jums jādomā, vai mēs varam apturēt procesu vai nē. Nu, atbilde uz jautājumu ir Jā, mēs varam apturēt pasākuma izplatīšanu. Tas tiek darīts, atsaucoties uz “StopPropagation” notikuma objekta metode.

window.addEventListener ('klikšķis', e => {e.stopPropagation ()}, patiess) window.addEventListener ('klikšķis', klausītājs ('c1'), patiess) window.addEventListener ('klikšķis', klausītājs ('c2 '), true) window.addEventListener (' klikšķis ', klausītājs (' b1 ')) window.addEventListener (' klikšķis ', klausītājs (' b2 '))

Izmantojot atslēgvārdu, mēs varam apturēt izplatīšanos. Tas darbojas šādi, kad mēs lietojam atslēgvārdu “ stopPropagation ” tad visi notikumi, kas ietilpst galvenajos notikumos, netiek izsaukti, un tāpēc tie netiktu izsaukti, kā tas ir minēts iepriekš. Ir vēl viens atslēgvārds, kas pazīstams kā “ stopImmediatePropagation ”. Kā norāda nosaukums, tas nekavējoties pārtrauc procesu par brāļiem un māsām.

šefpavārs vs ansible vs marionete

Ar to mēs esam nonākuši mūsu raksta beigās. Es ceru, ka jūs sapratāt, kas JavaScript ir notikumu burbuļošana un notikumu tveršana.

Tagad, kad jūs zināt par pasākumu burbuļošanu un notikumu tveršanu JavaScript, pārbaudiet autore Edureka. Tīmekļa attīstības sertifikācijas apmācība palīdzēs jums uzzināt, kā izveidot iespaidīgas vietnes, izmantojot HTML5, CSS3, Twitter Bootstrap 3, jQuery un Google API, un izvietot to Amazon Simple Storage Service (S3).

Vai mums ir jautājums? Lūdzu, pieminējiet to komentāru sadaļā “Notikumu burbuļošana un notikumu tveršana JavaScript valodā”, un mēs ar jums sazināsimies.