Šajā norādē tu dziļāk ielaidīsies pasaules notikumu apstrādes Web lietotnēs ar JavaScript . Tu apgūsi, kā izmantot addEventListener metodi, lai elastīgāk reaģētu uz izmaiņām ievades laukos. Atšķirībā no vienkāršākajām metodēm, piemēram, onchange vai oninput, addEventListener dod tev iespēju apvienot vairākus notikumu klausītājus vienam un tam pašam elementam un tādējādi panākt tīru funkciju loģikas un HTML-Markup atdalījumu. Ģitika, kopā izdarīsim soļus, kā tu to vari ieviest savā lietojumprogrammā.
Svarīgākie secinājumi
- addEventListener izmantošana ļauj reģistrēt vairākus notikumu apstrādātājus tam pašam elementam.
- Notikumu klausītājus jāreģistrē pēc tam, kad DOM ir pilnībā ielādēts, lai nodrošinātu, ka visi elementi ir pieejami.
- Notikumu klausītāju noņemšana būtu normāla prakse, lai novērstu atmiņas noplūdes.
Pēc posma norāde
Pirmais, kas tev nepieciešams, ir HTML dokuments ar ievades lauku. Ieliec savā HTML ievades lauku ar ID, uz kuru tu vēlāk vari atsaukties. Novieto piemērotā vietā -Tagā sekojošo HTML kodu:
Tagad, lai nodrošinātu, ka tavs JavaScript kods darbojas, jums ir jāpārvieto -Marķieris uz jūsu
-Marķiera beigu. Tādējādi tiek nodrošināts, ka DOM ir pilnībā ielādēts, pirms piekļūsiet elementiem. Tas novērš problēmas, kas varētu rasties, ja skripts tiks izpildīts pirms HTML elementiem.
Tagad mēs varam piekļūt ievades elementam ar JavaScript. Tavā
Bieži sastopams scenārijs ir pievienot vairākus notikumu klausītājus tam pašam elementam. Tas ļauj elastīgāk apstrādāt dažādus notikumu veidus. Tomēr jāatzīmē, ka katram reģistrētajam funkcijam jābūt savai loģiskai atdalīšanai, lai nodrošinātu kodu izlasāmību un uzturēšamību.
Kad esi pievienojis notikumu klausītājus, ir būtiski nodrošināt to noņemšanu sakarā ar atjaunošanu, it īpaši, ja elements vairs nav nepieciešams, piemēram, komponentes, kas vairs netiek renderētas. Lai to panāktu, tev ir jānodrošina, ka klausītājs tiek noņemts, kad elements tiek noņemts no DOM vai vairs netiek nepieciešams.
Tev arī vajadzētu apsvērt, kā paplašināt notikumu klausītāju izmantošanu. Daudz diskusiju gājis par to, ka attīstītājiem vajag nodrošināt papildu parametrus, piemēram, acaptures režīms, lai noteiktu notikumu apstrādes secību. Tomēr šīs papildu opcijas prasa dziļāku izpratni par notikumu izplatību.
Pārliecinies, ka tavs JavaScript kods ir aiz DOM elementiem, lai elementi varētu tikt pareizi apstrādāti dokumenta ielādes laikā. Tas ir īpaši svarīgi, ja tavā skriptā ir daudz notikumu apstrādātāju, lai nodrošinātu, ka elementu atsauces vienmēr ir lokāli derīgas.
Kopsavilkums
Šajā vadlīnijā mēs apskatījām pamata soļus, kā izmantot addEventListener apstrādei tiešsaistes veidlapās. Tu iemācījies, kā pievienot, noņemt un reaģēt uz vairākām izmaiņām notikumos.
Bieži uzdotie jautājumi
Kas ir atšķirība starp onchange un addEventListener?onchange ir vecāka metode, kas ļauj tikai vienu notikumu apstrādātāju, kamēr addEventListener var pievienot vairākus apstrādātājus vienam notikumam.
Kad man vajadzētu izmantot removeEventListener?removeEventListener vajadzētu izmantot gadījumos, kad elements jau nav vajadzīgs vai pirms notikumu apstrādātāja jaunregitrēšanas.
Kā es varu pievienot vairākus notikumu klausītājus tam pašam elementam?Vai vienkārši vairākas addEventListener izsaukumu lieto attiecīgajam elementam, nododot dažādas funkcijas references.
