Sündmuste levitamise mõistmine JavaScriptis

JavaScripti sündmused toimivad nagu märguanded kasutaja interaktsiooni või muu toimingu toimumise kohta. Näiteks kui klõpsate vorminupul, genereerib teie brauser sündmuse, mis näitab, et see on juhtunud. Otsingukasti sisestamine tõstab ka sündmusi ja nii töötab automaatne soovitus sageli võrgus.

JavaScriptis käivituvad sündmused, mis hõlmavad kasutaja interaktsiooni, tavaliselt teatud elementide vastu. Näiteks nupu klõpsamine tõstab sündmuse selle nupu vastu. Kuid sündmused levivad ka: nad tulistavad teisi dokumendihierarhia elemente.

Lugege edasi, et saada teavet sündmuste levitamise ja kahe erineva saadaoleva tüübi kohta.

Mis on sündmuste käsitlemine JavaScriptis?

JavaScripti koodi abil saate veebilehe poolt esile kutsutud sündmusi püüda ja neile reageerida. Saate seda teha vaikekäitumise alistamiseks või toimingute tegemiseks, kui vaikeseadet pole. Levinud näide on vormi valideerimine. Sündmuste haldamine võimaldab teil katkestada vormi esitamise tavapärase protsessi.

Mõelge sellele näitele:

Klõpsake Mina

Ülaltoodud koodil on nupu element ID-ga nimega nupp. Sellel on klõpsusündmuste kuulaja, mis kuvab koos sõnumiga hoiatuse Tere, Maailm.

Mis on sündmuste levitamine?

Sündmuste levik kirjeldab sündmuste järjekorda DOM-puu kui veebibrauser need käivitab.

Oletame, et div-märgendi sees on vormimärgend ja mõlemal on onclick-sündmuste kuulajad. Sündmuste levitamine kirjeldab, kuidas üks sündmustekuulaja võib teise järel käivituda.

Paljundamist on kahte tüüpi:

1. Sündmuste mullitamine, millega sündmused mulisevad ülespoole, lapselt vanemale.
2. Sündmuste jäädvustamine, mille abil sündmused liiguvad allapoole, vanemalt lapsele.

Mis on sündmuste mullitamine JavaScriptis?

Sündmuse mullitamine tähendab, et sündmuse levimise suund on alamelemendist selle emaelemendini.

Mõelge järgmisele näitele. Sellel on kolm pesastatud elementi: div, vorm ja nupp. Igal elemendil on a klõpsa sündmuste kuulaja. Brauser kuvab an hoiatus sõnumiga, kui klõpsate igal elemendil.

Vaikimisi on veebibrauseris hoiatusteadete kuvamise järjekord nupp, vorm ja seejärel div. Sündmused pulbitsevad lapselt vanemale.

 div


 vormi 



 Nupp

Mis on sündmuste jäädvustamine?

Sündmuste jäädvustamisel on levimise järjekord vastupidine mullitamisele. Vastasel juhul on kontseptsioon identne. Ainus erinevus jäädvustamisel on see, et sündmused toimuvad vanemalt lapsele. Erinevalt eelmisest näitest kuvab brauser sündmuste jäädvustamise korral hoiatusi järgmises järjekorras: div, vorm ja nupp.

Sündmuste jäädvustamise saavutamiseks peate koodis tegema vaid ühe muudatuse. Teine parameeter addEventListener() määrab paljundamise tüübi. Vaikimisi on see vale, et tähistada mullitamist. Sündmuste jäädvustamise lubamiseks peate teise parameetri väärtuseks määrama tõene.

 div.addEventListener("click", ()=>{
 hoiatus ("div")
 }, tõsi);
 form.addEventListener("click", ()=>{
 hoiatus ("vorm")
 }, tõsi);
 button.addEventListener("click", ()=>{
 hoiatus ("nupp")
 }, tõsi);

Kuidas saate sündmuste levikut vältida?

Sündmuste leviku saate peatada kasutades stopPropagation() meetod. The addEventListener() meetod aktsepteerib sündmuse nime ja töötleja funktsiooni. Käsitleja võtab parameetriks sündmuse objekti. See objekt sisaldab kogu teavet sündmuse kohta.

Kui kutsute esile stopPropagation() meetodil, lõpetab sündmuse levimise sellest hetkest alates. Näiteks kui kasutate stopPropagation() vormielemendil lõpetavad sündmused lahtrisse div. Kui klõpsate nuppu, näete sündmusi nupul ja vormil, kuid mitte div.

form.addEventListener("click", (e)=>{
e.stopPropagation();
 hoiatus("vorm");
});

Seotud: Ultimate JavaScripti petuleht

JavaScriptil on kapoti all palju jõudu

JavaScripti sündmuste käsitlemine on võimas, võrreldav paljude täisväärtuslike liidese keeltega. Kui arendate interaktiivseid veebirakendusi, on see teie tööriistakasti oluline osa. Kuid on palju muid arenenud teemasid, millest aru saada. Professionaalsetel JavaScripti arendajatel on palju õppida!

Kui soovite õppida JavaScripti kodeerima nagu professionaal, vaadake meie nutikate vooderdiste juhendit ja valmistuge oma järgmises intervjuus wow-ks.

11 JavaScripti ühejoonist, mida peaksite teadma

Selle laia valiku JavaScripti ühesuunaliste moodulite abil saate vähese koodiga palju saavutada.

Loe edasi

Autori kohta