„JavaScript“ įvykių plitimo supratimas

„JavaScript“ įvykiai veikia kaip pranešimai, kad įvyko vartotojo sąveika ar kitas veiksmas. Pavyzdžiui, kai spustelėsite formos mygtuką, jūsų naršyklė sugeneruos įvykį, nurodantį, kad tai įvyko. Įvedus tekstą paieškos laukelyje taip pat atsiranda įvykių, todėl automatinis pasiūlymas dažnai veikia internete.

„JavaScript“ įvykiai, susiję su vartotojo sąveika, paprastai suveikia prieš konkrečius elementus. Pavyzdžiui, spustelėjus mygtuką suaktyvinamas įvykis prieš tą mygtuką. Tačiau įvykiai taip pat plinta: jie šaudo prieš kitus dokumentų hierarchijos elementus.

Skaitykite toliau, kad sužinotumėte viską apie įvykių plitimą ir du skirtingus galimus tipus.

Kas yra įvykių tvarkymas „JavaScript“?

Galite naudoti JavaScript kodą, kad gautumėte ir reaguotumėte į įvykius, kuriuos sukelia tinklalapis. Tai galite padaryti norėdami nepaisyti numatytosios elgsenos arba imtis veiksmų, kai nėra numatytojo. Dažnas pavyzdys yra formos patvirtinimas. Įvykių tvarkymas leidžia nutraukti įprastą formos pateikimo procesą.

Apsvarstykite šį pavyzdį:

Paspausk mane

Aukščiau pateiktame kode yra mygtuko elementas su ID pavadinimu mygtukas. Jame yra paspaudimo įvykių klausytojas, kuris kartu su pranešimu rodo įspėjimą Labas pasauli.

Kas yra įvykių platinimas?

Įvykio plitimas apibūdina įvykių eigos tvarką DOM medis kai žiniatinklio naršyklė juos suaktyvina.

Tarkime, kad „div“ žymos viduje yra formos žyma ir abiejuose yra onclick įvykių klausytojai. Įvykio plitimas aprašo, kaip vienas įvykių klausytojas gali suaktyvinti kitą.

Yra du dauginimo tipai:

1. Įvykių burbuliavimas, kurio metu įvykiai burbuliuoja aukštyn, nuo vaiko iki tėvo.
2. Įvykių fiksavimas, kai įvykiai keliauja žemyn, nuo tėvų iki vaiko.

Kas yra įvykių burbuliavimas JavaScript?

Įvykio burbuliavimas reiškia, kad įvykio sklidimo kryptis bus nuo antrinio elemento iki pirminio elemento.

Apsvarstykite toliau pateiktą pavyzdį. Jame yra trys įdėtieji elementai: div, forma ir mygtukas. Kiekvienas elementas turi a spustelėkite renginio klausytoja. Naršyklė rodo an budrus su pranešimu, kai spustelėsite kiekvieną elementą.

Pagal numatytuosius nustatymus žiniatinklio naršyklės įspėjimų pateikimo tvarka bus mygtukas, forma, tada div. Įvykiai burbuliuoja nuo vaiko iki tėvo.

 div


 forma 



 Mygtukas

Kas yra įvykių fiksavimas?

Užfiksuojant įvykius, sklidimo tvarka yra priešinga burbuliavimui. Priešingu atveju koncepcija yra identiška. Vienintelis skirtumas su fiksavimu yra tas, kad įvykiai vyksta nuo tėvų iki vaiko. Priešingai nei ankstesniame pavyzdyje, fiksuojant įvykius, naršyklė perspėjimus rodys tokia tvarka: div, forma ir mygtukas.

Norėdami užfiksuoti įvykius, turite atlikti tik vieną kodo pakeitimą. Antrasis parametras addEventListener() apibrėžia plitimo tipą. Pagal numatytuosius nustatymus jis yra klaidingas, kad būtų rodomas burbuliavimas. Norėdami įjungti įvykių fiksavimą, antrojo parametro vertę turite nustatyti į true.

 div.addEventListener("click", ()=>{
 įspėjimas ("div")
 }, tiesa);
 form.addEventListener("click", ()=>{
 įspėjimas ("forma")
 }, tiesa);
 button.addEventListener("click", ()=>{
 įspėjimas ("mygtukas")
 }, tiesa);

Kaip galite užkirsti kelią įvykių plitimui?

Galite sustabdyti įvykių plitimą naudodami sustabdyti plitimą () metodas. The addEventListener() metodas priima įvykio pavadinimą ir tvarkyklės funkciją. Valdytojas kaip parametrą priima įvykio objektą. Šiame objekte yra visa informacija apie įvykį.

Kai kreipiatės į sustabdyti plitimą () metodu, įvykis nustos sklisti nuo to momento. Pavyzdžiui, kai naudojate sustabdyti plitimą () formos elemente įvykiai nustos burbuliuoti iki div. Jei spustelėsite mygtuką, pamatysite mygtuko ir formos įvykius, bet ne div.

form.addEventListener("click", (e)=>{
e.stopPropagation();
 įspėjimas ("forma");
});

Susijęs: Ultimate JavaScript Cheat Sheet

„JavaScript“ turi daug galios po gaubtu

„JavaScript“ įvykių tvarkymas yra galingas, panašus į daugelį visapusiškų sąsajos kalbų. Kai kuriate interaktyvias žiniatinklio programas, tai yra svarbi jūsų įrankių rinkinio dalis. Tačiau yra daug kitų pažangių temų, kurias reikia suvokti. Profesionaliems JavaScript kūrėjams yra ko išmokti!

Jei norite išmokti koduoti „JavaScript“ kaip profesionalas, peržiūrėkite mūsų „gudrių įdėklų“ vadovą ir pasiruoškite „wow“ kitame pokalbyje.

11 „JavaScript One-Liners“, kuriuos turėtumėte žinoti

Pasiekite daug naudodami tik šiek tiek kodo naudodami šį platų „JavaScript“ vieno įdėklų asortimentą.

Skaitykite toliau

Apie autorių