Bubbling događaja i bilježenje događaja u JavaScript-u: Sve što trebate znati

Bubbling i hvatanje događaja najčešće su korišteni pojmovi u JavaScript-u u vrijeme tijeka događaja. To su dva načina širenja događaja u HTML DOM API-ju. Ovaj članak o bubblingu i bilježenju događaja u JavaScript-u detaljno će opisati zašto ih trebamo u u slijedećem slijedu:

• • • Što je bubbling u JavaScript-u?
    • Što je širenje događaja?
    • Što je bilježenje događaja?
    • Korištenje bubblinga i bilježenja događaja u JavaScript-u
    • Postupak rada

Što je bubbling u JavaScript-u?

Bubbling događaja pojam je na koji ljudi moraju naići tijekom razvijanja web aplikacije ili web stranice . U osnovi, bubbling događaja je tehnika u kojoj se obrađuju događaji kada se jedna stavka ugnijezdi na drugu stavku i mora biti iz istog događaja. Slična je enkapsulaciji.

Bubbling događaja samo je mali dio rukovanja događajima u JavaScript-u. Da bismo ga bolje razumjeli, moramo znati o širenju događaja i kako podržava bubbling.

Što je širenje događaja?

Razmnožavanje događaja može se usporediti kao nadređeni pojam s bubblingom i hvatanjem kao njegovo dijete.Zastupljen je na sljedeći način:

Ako kliknete bilo koju sliku, to ne samo da će generirati događaj klika, već se nastavlja na nadređenog 'a' i djeda 'li'. Na taj se način odvija širenje funkcije. Ovdje se slika smatra podređenom i ona je cilj događaja na kojem se generira klik. Slika zajedno sa svojim precima zajedno čini granu u terminologiji stabla. Grana je važna jer upoznajemo put kojim se događaj širi.

Svaki od slušatelja poziva se s objektom događaja, odnosno koji prikuplja informacije o događaju. Ovo je širenje vrlo važno jer upoznajemo postupak pozivanja svih slušatelja za određeni događaj. Iz gornje slike možemo primijetiti da je određivanje grane statično. Sve modifikacije stabla koje se dogode tijekom događaja se zanemaruju. Ovdje je širenje dvosmjerno, odnosno ide od prozora do cilja događaja i vraća se natrag. Ovdje je širenje široko kategorizirano u tri glavne vrste. To su:

struktura podataka o redu čekanja u javi

1. Faza hvatanja: Prelazak iz prozora u fazu cilja događaja.
2. Ciljna faza: To je ciljna faza.
3. Faza mjehurića: Od roditelja cilja cilja natrag do prozora.

Što je bilježenje događaja?

U ovoj se fazi pozivaju slušatelji hvatača čija je vrijednost registrirana kao 'istinita'. Napisano je kao:

el.addEventListener ('klik', slušatelj, istina)

Ovdje je vrijednost slušatelja registrirana kao 'istinita', pa se ovaj događaj snima. Ako ne postoji vrijednost, vrijednost je prema zadanim postavkama bila lažna i događaj se ne bi zabilježio. Dakle, u ovoj fazi taj događaj čija je vrijednost istinita samo im se otvara s prozora i biva pozvan i zarobljen.

Zatim se u fazi cilja događaja pozivaju svi registrirani slušatelji bez obzira na njihov status zastave koji je istinit ili netačan.

Korištenje bubblinga i bilježenja događaja u JavaScript-u

U fazi mjehurića poziva se samo ne-hvatač, to jest događaji koji imaju vrijednost zastavice kao 'lažno'. Mehurići događaja i bilježenje događaja vrlo su korisni i važni u terminologiji DOM (objektni model dokumenta).

el.addEventListener ('klik', slušatelj, lažno) // slušatelj ne bilježi el.addEventListener ('klik', slušatelj) // slušatelj ne bilježi

Gornji dio koda prikazuje rad faze mjehurića i hvatanja. Ne idu svi događaji na cilj događaja. Neki od njih ne puknu. Njihova putovanja prestaju nakon ciljne faze. Tok faze od tri događaja prikazan je na sljedećem dijagramu:

Mehurići događaja ne rade u svim vrstama događaja, međutim, slušatelj mora posjedovati '.mjehurić ”Logičko svojstvo objekta događaja. Neka od ostalih svojstava uključuju:

1. e.cilj: koji upućuje na cilj događaja.
2. e.currentTarget: to je način na koji su registrirani trenutni slušatelji. Ovdje se vrijednost poziva pomoću ovaj ključna riječ.
3. e.eventPhase: To je cijeli broj koji se odnosi na ostale tri ključne riječi poput Faza hvatanja, faza mjehurića, AT_Target faza.

Postupak rada

Pogledajmo detaljnije gornju ilustraciju. Kliknimo element “buttonOne” i tada će se odmah pokrenuti događaj. Događaj obično započinje svoje putovanje od korijena koji je najviši element stabla. Zatim slijedi stablo ciljanog događaja koji je 'buttonOne'. Evo kako putuje:

Kao što je prikazano na slici, događaj se na kraju probija kroz terminologije DOM-a dosežući ciljni događaj. Sad kad događaj dostigne svoj cilj, on ne završava. To se nastavlja i nastavlja unutar DOM terminologija, kao što je prikazano na donjoj slici.

Kao i prije, svaki element na putu događaja dok se kreće prema gore dobiva obavijest o svom postojanju. Kako ide dalje, sigurno razmišljate možemo li zaustaviti postupak ili ne. Pa, odgovor na pitanje je Da, možemo zaustaviti širenje događaja. To se postiže pozivanjem na “StopPropagation” metoda objekta događaja.

window.addEventListener ('click', e => {e.stopPropagation ()}, true) window.addEventListener ('click', listener ('c1'), true) window.addEventListener ('click', listener ('c2 '), true) window.addEventListener (' click ', listener (' b1 ')) window.addEventListener (' click ', listener (' b2 '))

Primjenom ključne riječi uspjeli smo zaustaviti širenje. Djeluje ovako, kada primjenjujemo ključnu riječ „ stopPropagation ' tada se svi događaji pod glavnim događajima ne pozivaju i stoga ne bi bili pozvani kako je spomenuto u gornjem dijelu koda. Postoji još jedna ključna riječ poznata kao „ stopImmediatePropagation ”. Kao što i samo ime govori, odmah zaustavlja postupak braće i sestara.

Ovime smo došli do kraja našeg članka. Nadam se da ste razumjeli što je bubbling i bilježenje događaja u JavaScript-u.

Sad kad znate za bubbling i bilježenje događaja u JavaScript-u, pogledajte od Edureke. Obuka za certificiranje web razvoja pomoći će vam naučiti kako stvoriti impresivne web stranice pomoću HTML5, CSS3, Twitter Bootstrap 3, jQuery i Google API-ja i rasporediti ih na Amazon Simple Storage Service (S3).

Imate pitanje za nas? Molimo vas da ga spominjete u odjeljku za komentare u „Bubbling Event and Capturing Event in JavaScript“ i javit ćemo vam se.