Dinamiskajā tīmekļa izstrādes pasaulē lietotāja mijiedarbības apstrāde ir svarīga, lai izveidotu saistošas lietojumprogrammas. Viena no šādām mijiedarbībām ir ievades notikums, kas ir šodienas diskusijas centrā. Mēs iedziļināsimies, kā rīkoties ar šo notikumu, izmantojot Typescript — populāru JavaScript superkopu, kas ievieš statisko rakstīšanu, lai uzlabotu mērogojamību un lasāmību. Veiksmīgi ieviešot ievades notikumus, tiks atvērts potenciāls izveidot interaktīvas lietotāja saskarnes, kas apkopo lietotāju datus, izraisot informācijas plūsmu, kas ir būtiska gan priekšgala, gan aizmugursistēmas procesiem.
Ievades notikumi ir pārlūkprogrammas notikumi, kas tiek aktivizēti katru reizi, kad lietotājs tīmekļa lapā modificē teksta ievadi . Tā var būt teksta ievadīšana meklēšanas joslā, veidlapā vai jebkurā citā gadījumā, kad lietotājs mijiedarbojas ar teksta lauku. Šī mijiedarbība ir ļoti svarīga, jo tā ļauj tīmekļa vietnēm apkopot, apstrādāt un manipulēt ar lietotāja ievadītajiem datiem.
let inputElement = document.getElementById('input') as HTMLInputElement;
inputElement.addEventListener('input', (event) => {
console.log(event.target.value);
});
Iepriekš minētajā koda fragmentā esam izveidojuši ievades notikumu uztvērēju, izmantojot Typescript. Funkcijai addEventListener ir divi parametri: notikuma veids (šajā gadījumā "ievade") un notikumu apstrādes funkcija.
Kā apstrādāt ievades notikumus mašīnrakstā
Lai efektīvi apstrādātu ievades notikumus programmā TypeScript, vispirms ir jāizprot vietējā JavaScript ievades notikums, pēc tam jāpievieno TypeScript statiskā rakstīšana, lai uzlabotu koda bāzes uzticamību un apkopi.
Notikumu klausītājs tiek iestatīts, izmantojot metodi addEventListener() , mērķējot uz elementu, kuram vēlaties lietot klausītāju — šajā gadījumā tas ir notikumam “ievade”. Kad mērķa ievades laukā tiek konstatētas izmaiņas, notikumu klausītājs aktivizē atzvanīšanas funkciju.
inputElement.addEventListener('input', (event: Event) => {
let target = event.target as HTMLInputElement;
console.log(target.value);
});
Šajā TypeScript kodā mēs saglabājam struktūru, bet pievienojam tipa anotācijas, lai sīkāk aprakstītu mūsu kodu. Mēs definējam “notikumu” kā notikumu veidu. Mēs arī norādām, ka no notikuma objekta iegūtajam mainīgajam "target" ir HTMLInputElement tips.
Kodeksa soli pa solim skaidrojums
Tālāk ir sniegts iepriekšējā TypeScript koda detalizēts skaidrojums:
- Pirmā rinda ir mūsu ievades elementa atlase no DOM (dokumenta objekta modeļa) un tā piešķiršana mainīgajam “inputElement”. Tas tiek ierakstīts kā “HTMLInputElement”, kas ir viens no TypeScript HTMLElement veidiem.
- Pēc tam elementam “inputElement” pievienojam notikumu uztvērēju. Notikuma veids ir “input”, un apstrādes funkcija ir otrais parametrs.
- Apstrādes funkcija ņem parametru "notikums", kas ir notikuma tipa. Šajā objektā ir informācija par notikumu, piemēram, notikuma mērķis (elements, kas aktivizēja notikumu).
- Pēc tam mēs piešķiram notikuma mērķi jaunam mainīgajam “target”. Mērķis ir izmests kā "HTMLInputElement", ti, mēs esam pārliecināti, ka tas ir ievades lauks.
- Visbeidzot, mēs reģistrējam faktisko vērtību (tekstu), ko lietotājs ievada laukā.
Kopsavilkums
Ievades notikumi ir spēcīgs tīmekļa izstrādes rīks, kas nodrošina divvirzienu saziņu starp lietotājiem un lietojumprogrammām. Lai pareizi uzklausītu un apstrādātu šos notikumus programmā TypeScript, ir nepieciešama dziļa izpratne par JavaScript notikumiem un statiskās rakstīšanas priekšrocībām. Izmantojot pareizo lietojumprogrammu, varat palielināt savas lietojumprogrammas iesaisti un funkcionalitāti.
Šajā rokasgrāmatā ir tieši apskatīta ievades notikumu apstrāde programmā TypeScript. Tomēr vispārīgie principi attiecas uz citu veidu notikumu, piemēram, klikšķu vai tastatūras notikumu, apstrādi. Tā pati struktūra tiek uzturēta: elementa atlase, klausītāja pievienošana ar notikuma veidu un apstrādes funkciju un notikuma objekta apstrāde atbilstoši jūsu lietojumprogrammas vajadzībām.
