Tu esi jaudžioje JavaScript pasaulyje ir jau turi patirties su įvykiais. Šiame vadove mes išsamiau aptarsime tema "Įvykiai". Šie interaktyvūs elementai yra esminiai fiksuojant ir reaguojant į vartotojų veiksmus. Leisk mums kartu atrasti pagrindus!
Svarbiausi supratimai
- Įvykiai yra įvykiai, kurie vyksta naršyklėje, pavyzdžiui, paspaudimai, klaviatūros stūmimai ar pelės judesiai.
- Kiekvienas įvykis gali būti susietas su įvykio apdorotoju, funkcija, kuri atlieka tam tikrus veiksmus, kai įvykis įvyksta.
- Yra daugybė įvykių tipų, įskaitant pelės įvykius, klaviatūros įvykius ir formų įvykius.
- Tinkama įvykių implementacija leidžia sukurti dinamiškas ir interaktyvias svetaines.
Žingsnis po žingsnio vadovas
1. Įvykių pagrindai
Įvykiai yra pagrindiniai konceptai JavaScript, leidžiantys reaguoti į vartotojo interakcijas. Žinomiausias pavyzdys yra onclick įvykis. Jis įvyksta, kai vartotojas paspaudžia elementą. Norint su juo dirbti, reikia apibrėžti įvykio apdorotoją. Tai yra funkcija, kuri bus vykdoma, kai įvykis įvyks.
2. Kanvo elemento kūrimas
Norėdami pademonstruoti onclick įvykį, sukursime paprastą kanvo elementą. Šiame pavyzdyje kanvas bus 200 x 200 pikselių dydžio ir turės žalią foną, kad jis būtų matomas. Galite naudoti getElementById metodą, kad gautumėte šį elementą DOM'e.
3. onclick įvykio implementacija
Dabar pridėsime anoniminę funkciją, kuri apdoroja onclick įvykį. Kai vartotojas paspaudžia žalią kanvą, turėtų būti rodoma žinutė "Buvo paspausta!". Tai rodysite naršyklėje. Išbandykite paspaudimą tiek viduje, tiek už kanvo erdvės, kad pamatytumėte, kaip reaguoja įvykis.
4. Kiti pelės įvykiai
Kitas naudingas įvykis yra onmouseover įvykis. Jis įvyksta, kai pelės žymeklis juda virš elemento. Čia taip pat apibrėžime funkciją, kuri parodo, kad pelės žymeklis yra virš kanvos. Išbandykite tai, judindami pelę virš kanvos, kad stebėtumėte, kaip tai veikia.
5. onmouseout įvykis
onmouseout įvykis įvyksta, kai pelės žymeklis palieka elementą. Tai ypač naudinga interakcijoms, tokioms kaip iššokantys langai arba informacijos burbulai. Pridėkite šį įvykį ir stebėkite, kaip jis reaguoja, kai vartotojas palieka žalią zoną.
6. Klaviatūros įvykiai
Be pelės įvykių, taip pat yra klaviatūros įvykiai, kurie reaguoja į klavišų paspaudimus. Naudokite paprastą įvesties lauką ir implementuokite onkeydown įvykį, kad pamatytumėte, kaip jis veikia. Kiekvieną kartą, kai paspaudžiamas klavišas, galite išvesti įvestį į įvesties lauką.
7. Fokusas ir onblur įvykis
Fokuso įvykiai yra svarbūs, ypač dirbant su formų įvestimis. onblur įvykis įvyksta, kai elementas praranda fokusą. Pridėkite dar vieną įvesties lauką ir apibrėžkite šį įvykį, kad rodytumėte žinutę, kai vartotojas palieka lauką. Išbandykite tai, naršydami tarp laukų.
8. Įvairių įvykių pažinimas
Yra daugybė kitų įvykių, kuriuos galite naudoti, kad padarytumėte savo svetaines interaktyvias. Tai apima vilkimo ir metimo funkcijas bei formų įvykius, tokius kaip onchange arba onsubmit. Peržiūrėkite galimybes ir eksperimentuokite su įvairiais įvykiais, kad geriau suprastumėte jų naudojimą.
Santrauka – Įvadas į JavaScript įvykius
Šiame vadove sužinojai apie JavaScript įvykių pagrindus. Sužinojai, kaip tvarkyti tokius įvykius kaip paspaudimai, pelės judesiai ir klaviatūros paspaudimai savo programose. Naudok šias žinias, kad sukurtum interaktyvias ir dinamiškas svetaines.
Dukartitės klausimai
Ką reiškia JavaScript įvykiai?JavaScript įvykiai yra veiksmai arba įvykiai, kurie vyksta naršyklėje, į kuriuos galite reaguoti.
Kaip apibrėžti įvykio apdorotoją?Įvykio apdorotojas yra funkcija, susieta su įvykiu, kuri kviečiama, kai įvykis įvyksta.
Koks skirtumas tarp onkeydown ir onkeyup?onkeydown įvyksta, kai klavišas paspaudžiamas, o onkeyup – kai klavišas atleidžiamas.
Kokius įvykius galiu naudoti formose?Formose naudingi įvykiai, tokie kaip onblur, onchange ir onsubmit, kad tvarkytų interakcijas.
Kaip galiu naudoti onmouseover įvykį?onmouseover įvykis įvyksta, kai pelės žymeklis juda virš elemento, ir puikiai tinka hover efektams.
