Tu esi aizrautīgajā JavaScript pasaulē un jau esi ieguvis pieredzi ar notikumiem. Šajā pamācībā mēs detalizētāk apskatīsim tēmu "Notikumi". Šie interaktīvie elementi ir izšķiroši, lai fiksētu lietotāju darbības un reaģētu uz tām. Apskatīsim pamatus kopā!
Galvenās atziņas
- Notikumi ir notikumi, kas notiek pārlūkprogrammā, piemēram, klikšķi, taustiņu nospiešanas vai peles kustības.
- Katrs notikums var tikt saistīts ar notikuma apstrādātāju, kas ir funkcija, kas veic noteiktas darbības, kad notikums notiek.
- Ir daudzas notikumu sugas, tostarp peles notikumi, tastatūras notikumi un formas notikumi.
- Pareiza notikumu īstenošana ļauj veidot dinamiskas un interaktīvas tīmekļa vietnes.
Solim pa solim pamācība
1. Notikumu pamati
Notikumi ir pamata jēdzieni JavaScript, ar kuriem tu vari reaģēt uz lietotāju mijiedarbību. Pazīstamākais piemērs ir onclick notikums. Tas tiek aktivizēts, kad lietotājs noklikšķina uz elementa. Lai ar to strādātu, tev jāpievieno notikuma apstrādātājs. Tas ir funkcija, kas tiek izpildīta, kad notikums notiek.
2. Kanvas elementa izveide
Lai demonstrētu onclick notikumu, mēs izveidosim vienkāršu kanvas elementu. Šajā piemērā kanvas izmērs būs 200 x 200 pikseļu un tam būs zaļa fona krāsa, lai to padarītu redzamu. Tu vari izmantot getElementById metodi, lai šo elementu iegūtu DOM.
3. onclick notikuma īstenošana
Tagad mēs pievienosim anonīmu funkciju, kas apstrādā onclick notikumu. Kad lietotājs klikšķina uz zaļā kanvas, jāparādās ziņojumam “Tika noklikšķināts!”. To parādīsi pārlūkprogrammā. Pārbaudi klikšķi gan iekšā, gan ārpus kanvas zona, lai redzētu, kā notikums reaģē.
4. Citu peles notikumu izmantošana
Vēl viens noderīgs notikums ir onmouseover notikums. Tas tiek aktivizēts, kad peles rādītājs pārvietojas virs elementa. Arī šeit mēs definēsim funkciju, kas norāda, ka peles rādītājs ir virs kanvas. Pārbaudi, pārvietojot peli pāri kanvas, lai vērotu, kā tā darbojas.
5. onmouseout notikums
onmouseout notikums tiek aktivizēts, kad peles rādītājs atstāj elementu. Tas ir īpaši noderīgi mijiedarbībai, piemēram, izsistajiem logiem vai rīka padomiem. Pievieno šo notikumu un vēro, kā tas reaģē, kad lietotājs atstāj zaļo apgabalu.
6. Taustiņu notikumu ieviešana
Papildus peles notikumiem ir arī taustiņu notikumi, kas reaģē uz taustiņu nospiešanu. Ievieto vienkāršu ievades lauku un īsteno onkeydown notikumu, lai redzētu, kā tas darbojas. Katru reizi, kad tiek nospiesta taustiņš, tu vari parādīt ievadi ievades laukā.
7. Fokuss un onblur notikums
Fokusa notikumi ir svarīgi, īpaši veidlapu ievadēm. onblur notikums notiek, kad elements zaudē fokusu. Pievieno vēl vienu ievades lauku un definē šo notikumu, lai parādītu ziņu, kad lietotājs atstāj lauku. Testē to, pārvietojoties starp laukiem.
8. Dažādu notikumu iepazīšana
Ir daudz citu notikumu, kurus tu vari izmantot, lai padarītu savas tīmekļa vietnes interaktīvas. Tas ietver vilkšanas un nomešanas funkcionalitātes un formas notikumus, piemēram, onchange vai onsubmit. Apskati iespējas un eksperimentē ar dažādiem notikumiem, lai labāk izprastu to lietošanu.
Secinājumi – Ievads JavaScript notikumos
Šajā rokasgrāmatā tu esi ieguvis pamata izpratni par JavaScript notikumiem. Tu esi uzzinājis, kā apstrādāt notikumus, piemēram, klikšķus, peles kustības un taustiņu nospiešanu savās lietojumprogrammās. Izmanto šo zināšanu, lai veidotu interaktīvas un dinamiskas tīmekļa vietnes.
Bieži uzdotie jautājumi
Kas ir JavaScript notikumi?JavaScript notikumi ir darbības vai notikumi, kas notiek pārlūkprogrammā, uz kuriem tu vari reaģēt.
Kā definēt notikuma apstrādātāju?Notikuma apstrādātājs ir funkcija, kas ir saistīta ar notikumu un tiek izsaukta, kad notikums notiek.
Kāds ir atšķirība starp onkeydown un onkeyup?onkeydown tiek aktivizēts, kad taustiņš tiek nospiests, savukārt onkeyup notiek, kad taustiņš tiek atbrīvots.
Kādus notikumus varu izmantot veidlapās?Veidlapās noderīgi ir tādi notikumi kā onblur, onchange un onsubmit, lai apstrādātu mijiedarbību.
Kā varu izmantot onmouseover notikumu?onmouseover notikums tiek aktivizēts, kad peles rādītājs pārvietojas virs elementa, un tas ir piemērots peldošajiem efektiem.
