Daugelis žiniatinklio programų naudojasi tam tikros formos įvykiais, kad galėtų atlikti savo funkcijas. Tam tikru momentu žmogus sąveikauja su jų sąsaja, kuri sukuria įvykį. Šie žmogaus vykdomi įvykiai paprastai priklauso nuo išorinio įrenginio, pvz., pelės ar klaviatūros.

Kai įrenginys sukuria įvykį, programa gali jo klausytis, kad žinotų, kada atlikti konkretų elgesį. Šioje pamokoje sužinosite, kaip klausytis įvykių naudojant JavaScript.

Kas yra įvykiais pagrįstas programavimas?

Įvykiais pagrįstas programavimas yra paradigmos, kuri remiasi įvykio vykdymu, kad atliktų savo funkcijas, pavadinimas. Įvykiais pagrįstą programą galima sukurti bet kuria aukšto lygio programavimo kalba. Tačiau įvykiais pagrįstas programavimas dažniausiai naudojamas tokiomis kalbomis kaip „JavaScript“, kurios integruojamos su vartotojo sąsaja.

Kas yra įvykių klausytojas?

Įvykių klausytojas yra funkcija, kuri inicijuoja iš anksto nustatytą procesą, jei įvyksta konkretus įvykis. Taigi įvykių klausytojas „klauso“ veiksmo, tada iškviečia funkciją, kuri atlieka susijusią užduotį. Šis įvykis gali būti viena iš daugelio formų. Įprasti pavyzdžiai yra pelės įvykiai, klaviatūros įvykiai ir lango įvykiai.

Įvykių klausytojo kūrimas naudojant „JavaScript“.

Galite klausytis įvykių bet kuriame elementas DOM. „JavaScript“ turi addEventListener() funkcija, kurią galite iškviesti bet kuriame tinklalapio elemente. The addEventListener() funkcija yra metodas EventTarget sąsaja. Visi objektai, palaikantys įvykius, įgyvendina šią sąsają. Tai apima langą, dokumentą ir atskirus puslapio elementus.

Funkcija addEventListener() turi tokią pagrindinę struktūrą:

element.addEventListener("įvykis", functionToExecute);

Kur:

• į elementas gali atstovauti bet kurią HTML žymą (nuo mygtuko iki pastraipos)
• į "įvykis" yra eilutė, įvardijanti konkretų, atpažįstamą veiksmą
• į funkcija Vykdyti yra nuoroda į esamą funkciją

Sukurkime šį tinklalapį, kuriame yra keli HTML elementai:

Sveiki


 Sveiki, sveiki atvykę į mano svetainę.


Sužinokite daugiau





Vartotojo informacija

Vartotojo vardas: 

Pateikti

Aukščiau pateiktas HTML kodas sukuria paprastą puslapį, nukreipiantį į JavaScript failą app.js. The app.js faile bus kodas įvykių klausytojams nustatyti. Taigi, jei norite pradėti konkretų procesą, kai vartotojas spustelėja pirmąjį tinklalapio mygtuką, tai yra failas, kuriame jį reikia sukurti.

Failas app.js

document.querySelector('.btn').addEventListener("spustelėkite", spustelėkite Demonstracija)
function clickDemo(){
 console.log ("Sveiki")
}

Aukščiau pateiktas JavaScript kodas pasiekia pirmąjį puslapio mygtuką naudodamas querySelector() funkcija. Tada jis prideda įvykių klausytoją prie šio elemento naudodamas addEventListener() metodas. Konkretus įvykis, kurio jis klausosi, turi pavadinimą „spustelėti“. Kai mygtukas suaktyvina tą įvykį, klausytojas paskambins clickDemo() funkcija.

Susijęs: Sužinokite, kaip naudoti DOM parinkiklius

The clickDemo() funkcija naršyklės konsolėje išspausdina „Labas“. Kiekvieną kartą, kai spustelėsite mygtuką, šią išvestį turėtumėte matyti savo konsolėje.

„Spustelėkite“ įvykio išvestis

Kas yra pelės įvykiai?

„JavaScript“ turi a MouseEvent sąsaja, vaizduojanti įvykius, įvykusius dėl vartotojo sąveikos su pele. Keli renginiai naudoja MouseEvent sąsaja. Šie įvykiai apima šiuos dalykus:

• spustelėkite
• dblclick
• pelės judesys
• užveskite pelės žymeklį
• pele
• pele
• pele žemyn

The spustelėkite įvykis įvyksta, kai vartotojas paspaudžia ir atleidžia pelės mygtuką, kai jo žymeklis yra virš elemento. Būtent tai atsitiko ankstesniame pavyzdyje. Kaip matote iš aukščiau pateikto sąrašo, pelės įvykiai gali būti įvairių formų.

Kitas įprastas pelės įvykis yra dblclick, kuris reiškia dukart spustelėjimą. Tai suaktyvinama, kai vartotojas greitai du kartus spusteli pelės mygtuką. Nuostabus dalykas apie addEventListener() funkcija yra ta, kad galite ją naudoti norėdami priskirti kelis įvykių klausytojus vienam elementui.

Įtraukite įvykį dblclick prie pirmojo mygtuko

document.querySelector('.btn').addEventListener("dblclick", dblclickDemo)
function dblclickDemo(){
 įspėjimas ("Tai demonstracija, kaip sukurti dukart spustelėjusį įvykį")
}

Pridėjus anksčiau pateiktą kodą prie failo app.js, bus veiksmingai sukurta antra pirmojo tinklalapio mygtuko įvykių klausytoja. Taigi, du kartus spustelėjus pirmąjį mygtuką, naršyklėje bus sukurtas toks įspėjimas:

Viršuje esančiame paveikslėlyje matysite sugeneruotą įspėjimą, taip pat matysite, kad konsolėje yra dar du „Sveiki“ išvestis. Taip yra todėl, kad dvigubo paspaudimo įvykis yra dviejų paspaudimų įvykių derinys ir yra abiejų įvykių klausytojų spustelėkite ir dblclick įvykius.

Kitų sąraše esančių pelės įvykių pavadinimai apibūdina jų elgesį. The pelės judesys įvykis įvyksta kiekvieną kartą, kai vartotojas pajudina pelę, kai žymeklis yra virš elemento. The pele įvykis įvyksta, kai vartotojas laiko nuspaudęs mygtuką virš elemento, tada jį atleidžia.

Kas yra klaviatūros įvykiai?

„JavaScript“ turi a Keyboard Event sąsaja. Tai stebi vartotojo ir jo klaviatūros sąveiką. Praeityje, Keyboard Event turėjo tris įvykių tipus. Tačiau nuo to laiko „JavaScript“ nebenaudojama mygtuko paspaudimas renginys.

Taigi klavišas ir klavišų paspaudimas įvykiai yra vieninteliai du rekomenduojami klaviatūros įvykiai, kurių jums reikia. The klavišų paspaudimas įvykis įvyksta, kai vartotojas paspaudžia klavišą ir klavišas įvykis įvyksta, kai vartotojas jį išleidžia.

Peržiūrėjus anksčiau pateiktą HTML pavyzdį, geriausia vieta pridėti klaviatūros įvykių klausytoją yra įvestis elementas.

Klaviatūros įvykių klausytojo pridėjimas prie failo app.js

tegul sveikinimai = document.querySelector('p');
document.querySelector('input').addEventListener("keyup", captureInput)
function captureInput (e){
 greetings.innerText = (`Sveiki, ${e.target.value}, sveiki atvykę į mano svetainę.`)
}

Aukščiau pateiktas kodas naudoja querySelector() funkcija pasiekti pastraipą ir įvestis elementų puslapyje. Tada jis vadina addEventListener() metodas ant įvestis elementas, kuris klauso klavišas renginys. Kai tik a klavišas įvykis įvyksta, CaptureInput() funkcija paima rakto reikšmę ir prideda ją prie puslapio pastraipos. The e parametras reiškia įvykį, kurį JavaScript priskiria automatiškai. Šis įvykio objektas turi savybę, tikslą, kuri yra nuoroda į elementą, su kuriuo vartotojas sąveikavo.

Šiame pavyzdyje etiketė, pritvirtinta prie įvestis lauke prašoma vartotojo vardo. Jei įvesite savo vardą į įvesties lauką, tinklalapis atrodys maždaug taip:

Dabar pastraipoje yra įvesties reikšmė, kuri aukščiau pateiktame pavyzdyje yra „Jane Doe“.

„addEventListener“ užfiksuoja visų rūšių vartotojo sąveiką

Šis straipsnis supažindino jus su addEventListener() metodą, taip pat keletą pelės ir klaviatūros įvykių, kuriuos galite naudoti su juo. Šiuo metu žinote, kaip klausytis konkretaus įvykio ir kaip sukurti į jį reaguojančią funkciją.

The addEventListener tačiau suteikia papildomų galimybių per trečiąjį parametrą. Galite naudoti jį norėdami valdyti įvykių plitimą: tvarką, kuria įvykiai pereina iš elementų į tėvus ar vaikus.

„JavaScript“ įvykių plitimo supratimas

Įvykiai yra galinga „JavaScript“ funkcija. Norint išmokti juos naudoti, labai svarbu suprasti, kaip žiniatinklio naršyklė juos pakelia prieš elementus.

Skaitykite toliau

Apie autorių