Razumevanje širjenja dogodkov v JavaScriptu

Dogodki v JavaScriptu delujejo kot obvestila, da je prišlo do uporabniške interakcije ali drugega dejanja. Na primer, ko kliknete gumb obrazca, vaš brskalnik ustvari dogodek, ki nakazuje, da se je to zgodilo. Vnašanje v iskalno polje tudi sproži dogodke in tako pogosto deluje samodejno predlaganje na spletu.

V JavaScriptu se dogodki, ki vključujejo uporabniško interakcijo, običajno sprožijo proti določenim elementom. Na primer, klik na gumb sproži dogodek proti temu gumbu. Toda dogodki se tudi širijo: sprožijo proti drugim elementom v hierarhiji dokumentov.

Berite naprej, če želite izvedeti vse o širjenju dogodkov in dveh različnih vrstah, ki sta na voljo.

Kaj je ravnanje z dogodki v JavaScriptu?

Kodo JavaScript lahko uporabite za lovljenje dogodkov, ki jih sproži spletna stran, in odzivanje nanje. To lahko storite, če želite preglasiti privzeto vedenje ali ukrepati, ko privzeto ne obstaja. Pogost primer je potrditev obrazca. Obravnava dogodkov vam omogoča prekinitev običajnega postopka oddaje obrazca.

Razmislite o tem primeru:

Kliknite Me

Zgornja koda ima element gumba z ID-jem, imenovanim gumb. Ima poslušalec dogodkov klikov, ki prikaže opozorilo s sporočilom Pozdravljen, svet.

Kaj je širjenje dogodkov?

Širjenje dogodka opisuje vrstni red, v katerem dogodki potujejo skozi DOM drevo ko jih spletni brskalnik sproži.

Predpostavimo, da je znotraj oznake div oznaka obrazca in oba imata poslušalce dogodkov onclick. Razširjanje dogodkov opisuje, kako lahko en poslušalec dogodkov sproži drugega za drugim.

Obstajata dve vrsti razmnoževanja:

1. Mehurčkanje dogodkov, s katerim dogodki mehurčkajo navzgor, od otroka do starša.
2. Zajem dogodkov, s katerim dogodki potujejo navzdol, od starša do otroka.

Kaj je mehurčkanje dogodkov v JavaScriptu?

Mehurčkanje dogodkov pomeni, da bo smer širjenja dogodka od podrejenega elementa do njegovega nadrejenega elementa.

Razmislite o naslednjem primeru. Ima tri ugnezdene elemente: div, obrazec in gumb. Vsak element ima a kliknite poslušalec dogodkov. Brskalnik prikaže opozorilo s sporočilom, ko kliknete na vsak element.

Privzeto bo vrstni red, v katerem spletni brskalnik prikazuje opozorila, gumb, obrazec, nato div. Dogodki prehajajo od otroka do starša.

 razdel


 oblika 



 Gumb

Kaj je zajem dogodkov?

Pri zajemanju dogodkov je vrstni red širjenja nasproten od mehurčkov. Sicer pa je koncept enak. Edina razlika pri zajemanju je, da se dogodki dogajajo od starša do otroka. V nasprotju s prejšnjim primerom bo brskalnik pri zajemanju dogodkov prikazal opozorila v tem vrstnem redu: div, obrazec in gumb.

Če želite doseči zajem dogodkov, morate narediti samo eno spremembo kode. Drugi parameter za addEventListener() določa vrsto razmnoževanja. Privzeto je napačna, da predstavlja mehurčke. Če želite omogočiti zajem dogodkov, morate drugi parameter nastaviti na true.

 div.addEventListener("klik", ()=>{
 opozorilo ("div")
 }, prav);
 form.addEventListener("klik", ()=>{
 opozorilo ("obrazec")
 }, prav);
 button.addEventListener("klik", ()=>{
 opozorilo ("gumb")
 }, prav);

Kako lahko preprečite širjenje dogodkov?

Širjenje dogodkov lahko ustavite z uporabo stopPropagation() metoda. The addEventListener() metoda sprejme ime dogodka in funkcijo upravljalca. Upravljavec vzame objekt dogodka kot svoj parameter. Ta predmet vsebuje vse informacije o dogodku.

Ko prikličete stopPropagation() se bo dogodek od te točke prenehal širiti. Na primer, ko uporabljate stopPropagation() na elementu obrazca se bodo dogodki prenehali pojavljati do div. Če kliknete gumb, boste videli dogodke, ki se pojavijo na gumbu in obrazcu, ne pa tudi na div.

form.addEventListener("klik", (e)=>{
e.stopPropagation();
 opozorilo ("obrazec");
});

Povezano: Ultimate JavaScript Cheat Sheet

JavaScript ima pod pokrovom veliko moči

JavaScript-ovo ravnanje z dogodki je zmogljivo, primerljivo z mnogimi popolnimi jeziki vmesnika. Ko razvijate interaktivne spletne aplikacije, je to pomemben del vaše zbirke orodij. Obstaja pa veliko drugih naprednih tem, ki jih je treba razumeti. Za profesionalne razvijalce JavaScript se je treba veliko naučiti!

Če se želite naučiti kodirati JavaScript kot profesionalec, si oglejte naš vodnik za pametne podloge in se pripravite na navdušenje v naslednjem intervjuju.

11 enovrstic JavaScript, ki jih morate poznati

Dosezite veliko z le malo kode s tem širokim naborom enovrstic JavaScript.

Preberite Naprej

O avtorju