Daudzas tīmekļa lietojumprogrammas savu funkciju veikšanai ir atkarīgas no kāda veida notikumiem. Kādā brīdī cilvēks mijiedarbojas ar viņu saskarni, kas ģenerē notikumu. Šie cilvēka vadītie notikumi parasti balstās uz perifērijas ierīci, piemēram, peli vai tastatūru.

Kad ierīce izveido notikumu, programma var to noklausīties, lai zinātu, kad jāveic noteikta darbība. Šajā apmācībā jūs uzzināsit, kā klausīties notikumus, izmantojot JavaScript.

Kas ir uz notikumu virzīta programmēšana?

Uz notikumu orientēta programmēšana ir tādas paradigmas nosaukums, kas balstās uz notikuma izpildi, lai veiktu savas funkcijas. Ir iespējams izveidot uz notikumu orientētu programmu jebkurā augsta līmeņa programmēšanas valodā. Taču uz notikumiem balstīta programmēšana ir visizplatītākā tādās valodās kā JavaScript, kas integrējas ar lietotāja interfeisu.

Kas ir notikumu uztvērējs?

Notikumu uztvērējs ir funkcija, kas uzsāk iepriekš noteiktu procesu, ja notiek konkrēts notikums. Tātad notikumu klausītājs “noklausās” darbību, pēc tam izsauc funkciju, kas veic saistītu uzdevumu. Šim notikumam var būt viens no daudzajiem veidiem. Parastie piemēri ir peles notikumi, tastatūras notikumi un logu notikumi.

Notikumu uztvērēja izveide, izmantojot JavaScript

Jūs varat klausīties notikumus jebkurā elements DOM. JavaScript ir addEventListener() funkcija, kuru varat izsaukt jebkurā tīmekļa lapas elementā. The addEventListener() funkcija ir metode EventTarget saskarne. Visi objekti, kas atbalsta notikumus, īsteno šo saskarni. Tas ietver logu, dokumentu un atsevišķus lapas elementus.

Funkcijai addEventListener() ir šāda pamatstruktūra:

element.addEventListener("notikums", functionToExecute);

Kur:

• uz elements var attēlot jebkuru HTML tagu (no pogas līdz rindkopai)
• uz "pasākums" ir virkne, kas nosauc konkrētu, atpazītu darbību
• uz funkcijaIzpildīt ir atsauce uz esošu funkciju

Izveidosim šādu tīmekļa lapu, kurā ir daži HTML elementi:

Laipni lūdzam


 Sveiki, laipni lūdzam manā vietnē.


Uzzināt vairāk





Lietotāja informācija

Lietotājvārds: 

Iesniegt

Iepriekš minētais HTML kods izveido vienkāršu lapu, kas novirza uz JavaScript failu, ko sauc app.js. The app.js failā būs kods notikumu klausītāju iestatīšanai. Tātad, ja vēlaties uzsākt noteiktu procesu ikreiz, kad lietotājs noklikšķina uz pirmās pogas tīmekļa lapā, šis ir fails, kurā tas jāizveido.

Fails app.js

document.querySelector('.btn').addEventListener("klikšķis", klikšķis Demonstrācija)
function clickDemo(){
 console.log ("Sveiki")
}

Iepriekš minētais JavaScript kods piekļūst pirmajai pogai lapā, izmantojot querySelector() funkcija. Pēc tam šim elementam tiek pievienots notikumu uztvērējs, izmantojot addEventListener() metodi. Konkrētajam notikumam, ko tas klausās, ir nosaukums “klikšķis”. Kad poga aktivizē šo notikumu, klausītājs izsauks clickDemo() funkcija.

Saistīts: Uzziniet, kā izmantot DOM atlasītājus

The clickDemo() funkcija pārlūkprogrammas konsolē izdrukā "Hi there". Katru reizi, noklikšķinot uz pogas, jums vajadzētu redzēt šo izvadi savā konsolē.

“Noklikšķināšanas” notikuma izvade

Kas ir peles notikumi?

JavaScript ir a MouseEvent saskarne, kas atspoguļo notikumus, kas rodas lietotāja mijiedarbības ar peli dēļ. Vairāki pasākumi izmanto MouseEvent saskarne. Šie notikumi ietver:

• klikšķis
• dblclick
• peli pārvietot
• kursoru
• peles izslēgšana
• peles augšdaļa
• peles leju

The klikšķis notikums notiek, kad lietotājs nospiež un atlaiž peles pogu, kamēr tās rādītājs atrodas virs elementa. Tieši tas notika iepriekšējā piemērā. Kā redzat no iepriekš minētā saraksta, peles notikumiem var būt dažādi veidi.

Vēl viens izplatīts peles notikums ir dblclick, kas apzīmē dubultklikšķi. Tas tiek aktivizēts, kad lietotājs divas reizes ātri pēc kārtas noklikšķina uz peles pogas. Ievērojama lieta par addEventListener() funkcija ir tāda, ka varat to izmantot, lai vienam elementam piešķirtu vairākus notikumu uztvērējus.

Dblclick notikuma pievienošana pirmajai pogai

document.querySelector('.btn').addEventListener("dblclick", dblclickDemo)
function dblclickDemo(){
 brīdinājums ("Šis ir demonstrācija, kā izveidot dubultklikšķa notikumu")
}

Pievienojot iepriekš minēto kodu failam app.js, tīmekļa lapas pirmajai pogai tiks izveidots otrs notikumu uztvērējs. Tātad, divreiz noklikšķinot uz pirmās pogas, pārlūkprogrammā tiks izveidots šāds brīdinājums:

Augšējā attēlā redzēsit ģenerēto brīdinājumu, kā arī redzēsit, ka konsolē ir vēl divas “Sveiki” izejas. Tas ir tāpēc, ka dubultklikšķa notikums ir divu klikšķu notikumu kombinācija, un abiem ir notikumu uztvērēji klikšķis un dblclick notikumiem.

Citu peles notikumu nosaukumi sarakstā raksturo to uzvedību. The peli pārvietot notikums notiek katru reizi, kad lietotājs pārvieto peli, kad kursors atrodas virs elementa. The peles augšdaļa notikums notiek, kad lietotājs tur nospiestu pogu virs elementa un pēc tam to atlaiž.

Kas ir tastatūras notikumi?

JavaScript ir a KeyboardEvent saskarne. Tas klausās mijiedarbību starp lietotāju un viņa tastatūru. Pagātnē, KeyboardEvent bija trīs notikumu veidi. Tomēr kopš tā laika JavaScript ir novecojis taustiņu nospiešana notikumu.

Tātad, taustiņu pieslēgšana un taustiņu noslēgšana notikumi ir vienīgie divi ieteicamie tastatūras notikumi, kas ir viss, kas jums nepieciešams. The taustiņu noslēgšana notikums notiek, kad lietotājs nospiež taustiņu, un taustiņu pieslēgšana notikums notiek, kad lietotājs to izlaiž.

Pārskatot iepriekš minēto HTML piemēru, vislabākā vieta, kur pievienot tastatūras notikumu klausītāju, ir ievade elements.

Tastatūras notikumu uztvērēja pievienošana failam app.js

let greetings = document.querySelector('p');
document.querySelector('input').addEventListener("atslēga", uztveršanas ievade)
function captureInput (e){
 greetings.innerText = (`Sveiki, ${e.target.value}, laipni lūdzam manā vietnē.`)
}

Iepriekš minētais kods izmanto querySelector() funkcija, lai piekļūtu rindkopai un ievade elementi lapā. Pēc tam tas izsauc addEventListener() metode uz ievade elements, kas klausās taustiņu pieslēgšana notikumu. Ikreiz, kad a taustiņu pieslēgšana notikums notiek, CaptureInput() funkcija ņem atslēgas vērtību un pievieno to lapas rindkopai. The e parametrs apzīmē notikumu, ko JavaScript piešķir automātiski. Šim notikuma objektam ir rekvizīts mērķis, kas ir atsauce uz elementu, ar kuru lietotājs mijiedarbojās.

Šajā piemērā etiķete, kas pievienota ievade lauks pieprasa lietotājvārdu. Ja ievades laukā ierakstāt savu vārdu, tīmekļa lapa izskatīsies apmēram šādi:

Punktā tagad ir ievadītā vērtība, kas iepriekš minētajā piemērā ir “Jane Doe”.

addEventListener tver visu veidu lietotāju mijiedarbības

Šis raksts iepazīstināja jūs ar addEventListener() metodi, kā arī vairākus peles un tastatūras notikumus, ko varat izmantot ar to. Šajā brīdī jūs zināt, kā klausīties konkrētu notikumu un izveidot funkciju, kas uz to reaģē.

The addEventListener tomēr nodrošina papildu iespējas, izmantojot savu trešo parametru. Varat to izmantot, lai kontrolētu notikumu izplatību: secību, kādā notikumi pāriet no elementiem uz vecākiem vai bērniem.

Izpratne par notikumu izplatīšanu JavaScript

Notikumi ir spēcīgs JavaScript līdzeklis. Izpratne par to, kā tīmekļa pārlūkprogramma tos paaugstina pret elementiem, ir galvenais, lai apgūtu to lietošanu.

Lasiet Tālāk

Par autoru