Paljud veebirakendused toetuvad oma funktsioonide täitmiseks mingile sündmusele. Mingil hetkel suhtleb inimene oma liidesega, mis genereerib sündmuse. Need inimeste juhitud sündmused põhinevad tavaliselt välisseadmel, näiteks hiirel või klaviatuuril.

Kui seade loob sündmuse, saab programm seda kuulata, et teada saada, millal konkreetset käitumist läbi viia. Sellest õpetusest saate teada, kuidas kuulata sündmusi JavaScripti abil.

Mis on sündmustepõhine programmeerimine?

Sündmuspõhine programmeerimine on paradigma nimi, mis tugineb oma funktsioonide täitmiseks sündmuse täitmisele. Sündmuspõhise programmi on võimalik luua mis tahes kõrgetasemelises programmeerimiskeeles. Kuid sündmustepõhine programmeerimine on kõige levinum keeltes, nagu JavaScript, mis integreeritakse kasutajaliidesega.

Mis on sündmuste kuulaja?

Sündmuskuulaja on funktsioon, mis konkreetse sündmuse toimumisel käivitab eelnevalt määratletud protsessi. Niisiis, sündmuste kuulaja "kuulab" toimingut ja kutsub seejärel funktsiooni, mis täidab seotud ülesande. Sellel sündmusel võib olla üks paljudest vormidest. Levinud näited hõlmavad hiiresündmusi, klaviatuurisündmusi ja aknasündmusi.

Sündmuskuulaja loomine JavaScripti abil

Saate kuulata sündmusi mis tahes element DOM-is. JavaScriptil on addEventListener() funktsioon, mida saate kutsuda mis tahes veebilehe elemendile. The addEventListener() funktsioon on meetod EventTarget liides. Kõik objektid, mis toetavad sündmusi, rakendavad seda liidest. See hõlmab akent, dokumenti ja lehe üksikuid elemente.

Funktsioonil addEventListener() on järgmine põhistruktuur:

element.addEventListener("sündmus", funktsioonToExecute);

Kus:

• a element võib esindada mis tahes HTML-märgendit (nupust lõiguni)
• a "sündmus" on string, mis nimetab konkreetset tunnustatud toimingut
• a funktsioon Täitmiseks on viide olemasolevale funktsioonile

Loome järgmise veebilehe, millel on mõned HTML-elemendid:

Tere tulemast


 Tere, tere tulemast minu veebisaidile.


Lisateave





Kasutajateave

Kasutajanimi: 

Esita

Ülaltoodud HTML-kood loob lihtsa lehe, mis lingib JavaScripti failile app.js. The app.js fail sisaldab koodi sündmuste kuulajate seadistamiseks. Seega, kui soovite käivitada konkreetse protsessi iga kord, kui kasutaja klõpsab veebilehel esimest nuppu, on see fail, milles see luuakse.

Fail app.js

document.querySelector('.btn').addEventListener("klõps", klõpsake Demo)
function clickDemo(){
 console.log ("Tere")
}

Ülaltoodud JavaScripti kood pääseb lehe esimesele nupule, kasutades querySelector() funktsiooni. Seejärel lisab see sellele elemendile sündmuste kuulaja, kasutades addEventListener() meetod. Konkreetne sündmus, mida see kuulab, kannab nime "klõps". Kui nupp käivitab selle sündmuse, helistab kuulaja clickDemo() funktsiooni.

Seotud: Õppige kasutama DOM-valijaid

The clickDemo() funktsioon prindib brauseri konsooli "Tere". Iga kord, kui klõpsate nuppu, peaksite seda väljundit oma konsoolis nägema.

"Kliki" sündmuse väljund

Mis on hiireüritused?

JavaScriptil on a MouseEvent liides, mis esindab sündmusi, mis toimuvad kasutaja suhtlemise tõttu hiirega. Mitmed sündmused kasutavad MouseEvent liides. Need sündmused hõlmavad järgmist:

• klõpsa
• dblclick
• hiire liigutamine
• kursorit
• hiire väljas
• hiirelipp
• hiire alla

The klõpsa sündmus toimub siis, kui kasutaja vajutab ja vabastab hiirenupu, kui kursor on elemendi kohal. Täpselt nii juhtus eelmises näites. Nagu ülaltoodud loendist näha, võivad hiiresündmused esineda mitmel kujul.

Teine levinud hiiresündmus on dblclick, mis tähistab topeltklõpsu. See käivitub, kui kasutaja klõpsab kiiresti kaks korda hiirenupule. Märkimisväärne asi selle kohta addEventListener() funktsioon on see, et saate seda kasutada mitme sündmusekuulaja määramiseks ühele elemendile.

Esimesele nupule sündmuse dblclick lisamine

document.querySelector('.btn').addEventListener("dblclick", dblclickDemo)
function dblclickDemo(){
 alert ("See on demonstratsioon topeltklõpsu sündmuse loomise kohta")
}

Ülaltoodud koodi lisamine faili app.js loob tõhusalt teise sündmuste kuulaja veebilehe esimese nupu jaoks. Seega, kui klõpsate kaks korda esimest nuppu, luuakse brauseris järgmine hoiatus:

Ülaltoodud pildil näete genereeritud hoiatust ja näete ka seda, et konsoolis on veel kaks "Tere" väljundit. Selle põhjuseks on asjaolu, et topeltklõpsu sündmus on kahe klõpsusündmuse kombinatsioon ja mõlema jaoks on sündmuste kuulajad klõpsa ja dblclick sündmused.

Teiste hiiresündmuste nimed loendis kirjeldavad nende käitumist. The hiire liigutamine sündmus toimub iga kord, kui kasutaja liigutab hiirt, kui kursor on elemendi kohal. The hiirelipp sündmus toimub siis, kui kasutaja hoiab elemendi kohal nuppu all ja vabastab selle.

Mis on klaviatuuriüritused?

JavaScriptil on a Keyboard Event liides. See kuulab kasutaja ja tema klaviatuuri vahelist suhtlust. Minevikus, Keyboard Event oli kolme tüüpi sündmusi. Kuid JavaScript on sellest ajast alates aegunud klahvivajutus sündmus.

Seega klahvivajutus ja klahvi alla sündmused on ainsad kaks soovitatud klaviatuurisündmust, mis on kõik, mida vajate. The klahvi alla sündmus toimub siis, kui kasutaja vajutab klahvi alla ja klahvivajutus sündmus toimub siis, kui kasutaja selle vabastab.

Vaadates uuesti ülaltoodud HTML-i näidet, on parim koht klaviatuuri sündmuste kuulaja lisamiseks sisend element.

Klaviatuuri sündmuste kuulaja lisamine faili app.js

let tervitused = document.querySelector('p');
document.querySelector('input').addEventListener("keyup", captureInput)
function captureInput (e){
 greetings.innerText = (`Tere ${e.target.value}, tere tulemast minu veebisaidile.`)
}

Ülaltoodud kood kasutab querySelector() funktsioon lõikele juurdepääsuks ja sisend elemendid lehel. Seejärel kutsub see üles addEventListener() meetodil sisend element, mis kuulab klahvivajutus sündmus. Alati, kui a klahvivajutus sündmus toimub, CaptureInput() funktsioon võtab võtme väärtuse ja lisab selle lehel olevale lõigule. The e parameeter tähistab sündmust, mille JavaScript määrab automaatselt. Sellel sündmuseobjektil on atribuut sihtmärk, mis on viide elemendile, millega kasutaja suhtles.

Selles näites on silt lisatud sisend väli nõuab kasutajanime. Kui sisestate oma nime sisestusväljale, näeb veebileht välja umbes selline:

Lõik sisaldab nüüd sisendväärtust, mis ülaltoodud näites on "Jane Doe".

addEventListener jäädvustab kõikvõimalikke kasutajate interaktsioone

See artikkel tutvustas teile addEventListener() meetod, aga ka mitu hiire- ja klaviatuurisündmust, mida saate sellega kasutada. Siinkohal teate, kuidas konkreetset sündmust kuulata ja kuidas luua sellele reageeriv funktsioon.

The addEventListener annab siiski lisavõimalusi oma kolmanda parameetri kaudu. Saate seda kasutada sündmuste leviku juhtimiseks: sündmuste liikumise järjekord elementidelt nende vanematele või lastele.

Sündmuste levitamise mõistmine JavaScriptis

Sündmused on võimas JavaScripti funktsioon. Nende kasutamise valdamiseks on oluline mõista, kuidas veebibrauser neid elementide vastu tõstab.

Loe edasi

Autori kohta