Razumijevanje širenja događaja u JavaScriptu

Događaji u JavaScriptu djeluju poput obavijesti da se dogodila korisnička interakcija ili druga radnja. Na primjer, kada kliknete na gumb obrasca, vaš preglednik generira događaj koji označava da se to dogodilo. Upisivanje u okvir za pretraživanje također izaziva događaje i ovako često funkcionira automatsko predlaganje na mreži.

U JavaScriptu, događaji koji uključuju korisničku interakciju obično se aktiviraju na određene elemente. Na primjer, klik na gumb pokreće događaj na tom gumbu. Ali događaji se također šire: pucaju na druge elemente u hijerarhiji dokumenata.

Čitajte dalje da biste saznali sve o širenju događaja i dvije različite vrste koje su dostupne.

Što je rukovanje događajima u JavaScriptu?

Možete koristiti JavaScript kod da uhvatite i odgovorite na događaje koje pokreće web stranica. To možete učiniti kako biste nadjačali zadano ponašanje ili poduzeli radnju kada ne postoji zadana vrijednost. Uobičajeni primjer je validacija oblika. Rukovanje događajima omogućuje vam da prekinete normalan proces podnošenja obrasca.

Razmotrimo ovaj primjer:

Kliknite Me

Gornji kod ima element gumba s ID-om pod nazivom gumb. Ima slušatelj događaja klika koji prikazuje upozorenje s porukom Pozdrav svijete.

Što je širenje događaja?

Širenje događaja opisuje redoslijed kojim događaji putuju kroz DOM stablo kada ih web preglednik aktivira.

Pretpostavimo da postoji oznaka obrasca unutar div oznake i obje imaju slušatelje događaja onclick. Propagacija događaja opisuje kako se jedan slušatelj događaja može aktivirati za drugim.

Postoje dvije vrste razmnožavanja:

1. Bubljenje događaja, kojim događaji kruže prema gore, od djeteta do roditelja.
2. Snimanje događaja, kojim događaji putuju prema dolje, od roditelja do djeteta.

Što je bubling događaja u JavaScriptu?

Oblačenje događaja znači da će smjer širenja događaja biti od podređenog elementa do njegovog nadređenog elementa.

Razmotrimo sljedeći primjer. Ima tri ugniježđena elementa: div, obrazac i gumb. Svaki element ima a klik slušatelj događaja. Preglednik prikazuje uzbuna s porukom kada kliknete na svaki element.

Prema zadanim postavkama, redoslijed kojim web preglednik prikazuje upozorenja bit će gumb, obrazac, zatim div. Događaji se prebacuju od djeteta do roditelja.

 razd


 oblik 



 Dugme

Što je snimanje događaja?

Kod hvatanja događaja, redoslijed širenja je suprotan od mjehurića. Inače, koncept je identičan. Jedina razlika sa snimanjem je u tome što se događaji događaju od roditelja do djeteta. Za razliku od prethodnog primjera, sa hvatanjem događaja, preglednik će prikazati upozorenja ovim redoslijedom: div, obrazac i gumb.

Da biste postigli bilježenje događaja, trebate napraviti samo jednu promjenu koda. Drugi parametar od addEventListener() definira vrstu razmnožavanja. Prema zadanim postavkama, predstavlja mjehuriće. Da biste omogućili hvatanje događaja, trebate postaviti drugi parametar na true.

 div.addEventListener("klik", ()=>{
 upozorenje ("div")
 }, pravi);
 form.addEventListener("klik", ()=>{
 upozorenje ("obrazac")
 }, pravi);
 button.addEventListener("klik", ()=>{
 upozorenje ("gumb")
 }, pravi);

Kako možete spriječiti širenje događaja?

Možete zaustaviti širenje događaja pomoću stopPropagation() metoda. The addEventListener() metoda prihvaća naziv događaja i funkciju rukovatelja. Rukovalac uzima objekt događaja kao svoj parametar. Ovaj objekt sadrži sve informacije o događaju.

Kada pozovete stopPropagation() metodom, događaj će se prestati širiti od te točke. Na primjer, kada koristite stopPropagation() na elementu obrasca, događaji će prestati bujati do div. Ako kliknete gumb, vidjet ćete događaje podignute na gumbu i obrascu, ali ne i na div.

form.addEventListener("klik", (e)=>{
e.stopPropagacija();
 upozorenje("obrazac");
});

Povezano: Ultimate JavaScript Cheat Sheet

JavaScript ima veliku snagu ispod haube

JavaScript-ovo rukovanje događajima moćno je, usporedivo s mnogim jezicima potpunog sučelja. Kada razvijate interaktivne web aplikacije, to je vitalni dio vašeg alata. Ali postoje mnoge druge napredne teme koje treba shvatiti. Za profesionalne JavaScript programere, ima puno toga za naučiti!

Ako želite naučiti kodirati JavaScript kao profesionalac, pogledajte naš vodič za clever-one linere i pripremite se da oduševite u svom sljedećem intervjuu.

11 JavaScript jednostrukih tekstova koje biste trebali znati

Postignite puno sa samo malo koda koristeći ovaj široki raspon jednostrukih JavaScript tekstova.

Pročitajte dalje

O autoru