Sa liigud JavaScripti põnevasse maailma ja sul on juba kogemusi üritustega. Selles õpetuses uurime lähemalt teemat "Üritused". Need interaktiivsed elemendid on hädavajalikud kasutaja tegevuste jäädvustamiseks ja neile reageerimiseks. Avame koos põhialuseid!
Tähtsad tähelepanekud
- Üritused on sündmused, mis toimuvad brauseris, nagu klõpsud, klahviala surumised või hiire liikumised.
- Iga üritus saab siduda ürituse käitlejaga, funktsiooniga, mis täidab teatud tegevusi, kui üritus toimub.
- On olemas arvukalt erinevaid üritusi, sealhulgas hiireüritused, klaviatuuriüritused ja vormiüritused.
- Õige ürituste rakendamine võimaldab luua dünaamilisi ja interaktiivseid veebilehti.
Üksikasjalik juhend
1. Ürituste alused
Üritused on põhilised kontseptsioonid JavaScriptis, millega saad reageerida kasutaja interaktsioonidele. Kõige tuntum näide on onclick üritus. See aktiveerub, kui kasutaja klikib elemendil. Selle töötlemiseks pead määratlema ürituse käitleja. See on funktsioon, mis täidetakse, kui üritus toimub.
2. Kanvase elemendi loomine
Demonstratsiooni jaoks loome lihtsa kanvase elemendi. Selles näites on kanvas 200 x 200 pikslit suur ja sellel on roheline taust, et see oleks nähtav. Sa saad kasutada meetodit getElementById, et saada see element DOM-is.
3. onclick ürituse rakendamine
Kohe lisame anonüümse funktsiooni, mis töötleb onclick üritust. Kui kasutaja klikib roheline kanvaal, peaks ilmuma teade „Klikitud!“. Seda näitad sa brauseris. Proovi klõpsata nii kanvase piirkonna sees kui ka väljaspool, et näha, kuidas üritus reageerib.
4. Muude hiireürituste kasutamine
Teine kasulik üritus on onmouseover üritus. See aktiveerub, kui hiirekursor liigub elemendi kohal. Siin määratleme samuti funktsiooni, mis näitab, et hiirekursor on kanvase kohal. Proovi seda, liigutades hiirt kanvase kohal, et jälgida, kuidas see töötab.
5. onmouseout üritus
onmouseout üritus aktiveerub, kui hiirekursor lahkub elemendist. See on eriti kasulik interaktsioonide jaoks nagu pop-up'id või tööriistavihjed. Lisa see üritus ja vaata, kuidas see reageerib, kui kasutaja lahkub roheliselt alalt.
6. Klahviürituste tutvustamine
Peale hiireürituste on ka klahviüritused, mis reageerivad klahvi vajutusele. Lisa lihtne sisendi väli ja rakenda onkeydown üritus, et näha, kuidas see töötab. Iga kord, kui klahvi vajutatakse, saad saadud sisendi väljundiks sisendiväljale.
7. Fookus ja onblur üritus
Fookuse üritused on olulised, eriti vormisisestustes. onblur üritus toimub, kui element kaotab fookuse. Lisa veel üks sisendiväli ja määra see üritus, et näidata teadet, kui kasutaja lahkub väljast. Proovi seda, navigeerides väli ümber.
8. Paljude ürituste tundmaõppimine
On palju muid üritusi, mida saad kasutada oma veebilehtede interaktiivseks muutmiseks. Need hõlmavad lohistamis- ja tilgutamisfunktsioone ning vormiüritusi nagu onchange või onsubmit. Uuri võimalusi ja katseta erinevate üritustega, et saada paremat tunnet nende kasutamise osas.
Kokkuvõte – Sissejuhatus JavaScripti üritustesse
Selles juhendis oled õppinud JavaScripti ürituste alused. Oled saanud teadmisi, kuidas hallata üritusi nagu klõpsud, hiire liikumised ja klahvi vajutused oma rakendustes. Kasuta neid teadmisi, et kujundada interaktiivseid ja dünaamilisi veebilehti.
Korduma kippuvad küsimused
Mis on JavaScripti üritused?JavaScripti üritused on tegevused või sündmused, mis toimuvad brauseris, millele saad reageerida.
Kuidas määratleda ürituse käitlejat?Ürituse käitleja on funktsioon, mis on seotud sündmusega ja kutsutakse esile, kui sündmus toimub.
Mis on erinevus onkeydown ja onkeyup vahel?onkeydown aktiveerub, kui klahvi vajutatakse, samas kui onkeyup toimub, kui klahv vabastatakse.
Milliseid üritusi saan kasutada vormides?Vormides on kasulikud üritused nagu onblur, onchange ja onsubmit, et hallata interaktsioone.
Kuidas saan kasutada onmouseover üritust?onmouseover üritus aktiveerub, kui hiirekursor liigub elemendi kohal ning sobib hõljumisefektide jaoks.
