V tej navodilih boste globoko stopili v svet obdelave dogodkov v spletnih aplikacijah z JavaScriptom. Naučili se boste, kako lahko uporabite metodo addEventListener, da bolj prilagodljivo odzovete na spremembe v poljih za vnos. Za razliko od enostavnejših metod, kot sta onchange ali oninput, vam addEventListener omogoča združevanje večih poslušalcev dogodkov za isti element in tako doseči čisto ločitev funkcionalne logike in HTML-oznake. Skupaj bomo prešli skozi korake, kako to lahko implementirate v svoji aplikaciji.
Najpomembnejša spoznanja
- Uporaba addEventListener omogoča registracijo večih rokovanj s dogodki za isti element.
- Poslušalce dogodkov je treba registrirati po tem, ko je DOM v celoti naložen, da se zagotovi, da so vsi elementi na voljo.
- Odstranjevanje poslušalcev dogodkov bi moralo biti pogosta praksa, da se izognete puščanju spomina.
Korak-za-korakom vodnik
Najprej potrebujete HTML dokument z vnosnim poljem. V vašem HTML vstavite polje za vnos z ID, na katerega se lahko sklicujete kasneje. Na primeren kraj v zanku postavite naslednjo kodo HTML:
Zdaj, da zagotovite, da vaš JavaScript koda deluje, morate premakniti skript na konec vaše <body>-oznake. S tem se zagotovi, da je DOM popolnoma naložen, preden dostopate do elementov. To preprečuje težave, ki bi se lahko pojavile, če bi bil skript izveden pred HTML elementi.
Zdaj lahko nagovorite vhodni element z JavaScriptom. V vaši <script> - oznaki uporabite document.getElementById, da dostopate do vhodnega polja. Tukaj je primer kode, ki jo lahko postavite v svoj JavaScript:</script> oznaki uporabite document.getElementById, da dostopate do vhodnega polja. Tukaj je primer kode, ki jo lahko postavite v svoj JavaScript:</p>
Z uspešno sklicevanjem na vhodni element je naslednji korak, da dodate poslušalca dogodkov. Z addEventListener lahko navedete specifične dogodke, kot so sprememba ali vnos, za ta element. Tako se lahko odzovete, ko uporabnik naredi spremembo v vašem vhodnem polju.
Dobro je tudi zagotoviti, da lahko odstranite istega poslušalca dogodkov, če je to potrebno. Z metodo removeEventListener lahko odstranite poslušalca, ki ste ga predhodno dodali. Pazite, da je funkcija enaka tisti, ki ste jo uporabili pri dodajanju, sicer poslušalca ne boste mogli pravilno odstraniti.
Pogost scenarij je dodajanje več poslušalcev dogodkov za isti element. To omogoča bolj fleksibilno obdelavo različnih tipov dogodkov. Pri tem pa je treba upoštevati, da bi morala imeti vsaka funkcija, ki jo registrirate, lastno logično ločitev, da zagotovite berljivost in vzdržljivost vaše kode.
Ko dodate poslušalca dogodkov, je ključno, da jih odstranite med čiščenjem, zlasti če element ni več potreben, na primer pri komponentah, ki se ne renderirajo več. Prepričajte se, da poslušalec odstranite, ko je element odstranjen iz DOM ali ni več potreben.
Razmisliti morate tudi o načinih, kako razširiti uporabo poslušalcev dogodkov. Včasih želijo razvijalci zagotoviti dodatne parametre, na primer zajemni način, da določijo vrstni red obdelave dogodkov. Za te razširjene možnosti pa potrebujete globlje razumevanje prenosa dogodkov.
Zagotovite, da je vaša JavaScript koda za DOM elementi, nato je zagotovljeno, da bodo elementi pravilno obdelani ob nalaganju dokumenta. To je še posebej pomembno, če imate skript z veliko rokovanji dogodkov, da bodo sklici na elemente vedno lokalno veljavni.
Povzetek
V tem vodiču smo obravnavali osnovne korake za uporabo addEventListener za obdelavo dogodkov in obrazcev na spletu. Spoznali ste, kako dodati, odstraniti in odzvati se na več sprememb s pomočjo Event-Listenerjev.
Pogosta vprašanja
Kakšna je razlika med onchange in addEventListener?onchange je starejša metoda, ki dovoljuje le en ročaj dogodka, medtem ko addEventListener lahko dodaja več ročajev za en dogodek.
Kdaj naj uporabim removeEventListener?removeEventListener naj se uporabi, ko element ni več potreben ali pred ponovno registracijo ročaja dogodka.
Kako lahko dodam več Event-Listenerjev za isti element?Za isti element preprosto uporabi več klicev na addEventListener, pri čemer predaš različne referenčne funkcije.
