Mnoge web aplikacije oslanjaju se na neki oblik događaja za obavljanje svojih funkcija. U nekom trenutku, čovjek stupi u interakciju sa svojim sučeljem, što generira događaj. Ovi događaji koje pokreću ljudi obično se oslanjaju na periferni uređaj, kao što je miš ili tipkovnica.

Kada uređaj kreira događaj, program ga može osluškivati ​​kako bi znao kada izvršiti određeno ponašanje. U ovom vodiču naučit ćete kako slušati događaje koristeći JavaScript.

Što je programiranje vođeno događajima?

Programiranje vođeno događajima naziv je paradigme koja se oslanja na izvršenje događaja kako bi izvršila svoje funkcije. Moguće je stvoriti program vođen događajima u bilo kojem programskom jeziku visoke razine. Ali programiranje vođeno događajima najčešće je u jezicima poput JavaScripta koji se integriraju s korisničkim sučeljem.

Što je slušatelj događaja?

Slušatelj događaja je funkcija koja pokreće unaprijed definirani proces ako se dogodi određeni događaj. Dakle, slušatelj događaja "sluša" radnju, a zatim poziva funkciju koja izvodi srodni zadatak. Ovaj događaj može imati jedan od mnogih oblika. Uobičajeni primjeri uključuju događaje miša, događaje tipkovnice i događaje prozora.

Izrada slušatelja događaja pomoću JavaScripta

Možete slušati događaje na bilo kojem element u DOM-u. JavaScript ima addEventListener() funkciju koju možete pozvati na bilo kojem elementu na web stranici. The addEventListener() funkcija je metoda Cilj događaja sučelje. Svi objekti koji podržavaju događaje implementiraju ovo sučelje. To uključuje prozor, dokument i pojedinačne elemente na stranici.

Funkcija addEventListener() ima sljedeću osnovnu strukturu:

element.addEventListener("događaj", functionToExecute);

Gdje:

• the element može predstavljati bilo koju HTML oznaku (od gumba do odlomka)
• the "događaj" je niz koji imenuje određenu, prepoznatu radnju
• the functionToExecute je referenca na postojeću funkciju

Kreirajmo sljedeću web stranicu koja ima nekoliko HTML elemenata:

Dobrodošli


 Pozdrav, dobrodošli na moju web stranicu.


Saznajte više





Informacije o korisniku

Korisničko ime: 

podnijeti

Gornji HTML kôd stvara jednostavnu stranicu koja povezuje na JavaScript datoteku pod nazivom app.js. The app.js datoteka će sadržavati kod za postavljanje slušatelja događaja. Dakle, ako želite pokrenuti određeni proces svaki put kada korisnik klikne prvi gumb na web stranici, ovo je datoteka u kojoj ga možete stvoriti.

Datoteka app.js

document.querySelector('.btn').addEventListener("klik", clickDemo)
funkcija clickDemo(){
 console.log("Bok")
}

Gore navedeni JavaScript kod pristupa prvom gumbu na stranici pomoću querySelector() funkcija. Zatim dodaje slušatelja događaja ovom elementu pomoću addEventListener() metoda. Konkretan događaj koji sluša ima naziv "klik". Kada tipka pokrene taj događaj, slušatelj će pozvati clickDemo() funkcija.

Povezano: Naučite kako koristiti DOM birače

The clickDemo() funkcija ispisuje "Bok" na konzolu preglednika. Svaki put kada kliknete gumb, trebali biste vidjeti ovaj izlaz u svojoj konzoli.

Izlaz događaja "klik".

Što su događaji miša?

JavaScript ima MouseEvent sučelje koje predstavlja događaje koji se događaju zbog interakcije korisnika s mišem. Nekoliko događaja koristi MouseEvent sučelje. Ti događaji uključuju sljedeće:

• klik
• dblclick
• mousemove
• prelazak mišem
• mouseout
• miša
• mousedown

The klik događaj se događa kada korisnik pritisne i otpusti tipku miša dok je njegov pokazivač iznad elementa. Upravo se to dogodilo u prethodnom primjeru. Kao što možete vidjeti iz gornjeg popisa, događaji miša mogu imati različite oblike.

Još jedan uobičajeni događaj miša je dblclick, što znači dvostruki klik. To se aktivira kada korisnik klikne gumb miša dvaput uzastopno. Izvanredna stvar u vezi s addEventListener() funkcija je da ga možete koristiti za dodjelu više slušatelja događaja jednom elementu.

Dodavanje dblclick događaja prvom gumbu

document.querySelector('.btn').addEventListener("dblclick", dblclickDemo)
funkcija dblclickDemo(){
 alert("Ovo je demonstracija kako stvoriti događaj dvostrukog klika")
}

Dodavanje gornjeg koda u app.js datoteku učinkovito će stvoriti drugi slušatelj događaja za prvi gumb na web stranici. Dakle, dvaput klikom na prvi gumb stvorit će se sljedeće upozorenje u pregledniku:

Na gornjoj slici vidjet ćete upozorenje koje je generirano, a također ćete vidjeti da su još dva "Bok" izlaza u konzoli. To je zato što je događaj dvostrukog klika kombinacija dva događaja klika i postoje slušatelji događaja za oba klik i dblclick događaji.

Imena ostalih događaja miša na popisu opisuju njihovo ponašanje. The mousemove događaj se događa svaki put kada korisnik pomakne miš kada je kursor iznad elementa. The miša događaj se događa kada korisnik drži pritisnut gumb iznad elementa, a zatim ga otpusti.

Što su događaji na tipkovnici?

JavaScript ima KeyboardEvent sučelje. Ovo osluškuje interakcije između korisnika i njegove tipkovnice. U prošlosti, KeyboardEvent imala tri tipa događaja. Međutim, JavaScript je od tada zastario pritiskom na tipku događaj.

Dakle, keyup i tipku dolje događaji su jedina dva preporučena događaja na tipkovnici, a to su sve što trebate. The tipku dolje događaj se događa kada korisnik pritisne tipku, a keyup događaj se događa kada ga korisnik otpusti.

Ponovno pregledavajući gornji primjer HTML-a, najbolje mjesto za dodavanje slušatelja događaja na tipkovnici je na ulazni element.

Dodavanje slušatelja događaja tipkovnice u datoteku app.js

neka pozdrav = document.querySelector('p');
document.querySelector('input').addEventListener("keyup", captureInput)
funkcija captureInput (e){
 greetings.innerText = (`Pozdrav ${e.target.value}, dobrodošli na moju web stranicu.`)
}

Gornji kod koristi querySelector() funkcija za pristup odlomku i ulazni elemenata na stranici. Zatim poziva addEventListener() metoda na ulazni element, koji osluškuje keyup događaj. Kad god a keyup dogodi se događaj, tj captureInput() funkcija uzima ključnu vrijednost i dodaje je odlomku na stranici. The e parametar predstavlja događaj koji JavaScript dodjeljuje automatski. Ovaj objekt događaja ima svojstvo, cilj, koji je referenca na element s kojim je korisnik stupio u interakciju.

U ovom primjeru, naljepnica pričvršćena na ulazni polje zahtijeva korisničko ime. Ako unesete svoje ime u polje za unos, web stranica će izgledati otprilike ovako:

Odlomak sada sadrži ulaznu vrijednost koja je, u gornjem primjeru, "Jane Doe".

addEventListener bilježi sve vrste interakcija korisnika

Ovaj članak vas je upoznao sa addEventListener() metoda, kao i nekoliko događaja miša i tipkovnice koje možete koristiti s njim. U ovom trenutku znate kako slušati određeni događaj i kako stvoriti funkciju koja reagira na njega.

The addEventListener pruža dodatnu mogućnost, međutim, putem svog trećeg parametra. Možete ga koristiti za kontrolu širenja događaja: redoslijeda kojim se događaji kreću od elemenata do njihovih roditelja ili djece.

Razumijevanje širenja događaja u JavaScriptu

Događaji su moćna JavaScript značajka. Razumijevanje kako ih web-preglednik postavlja u odnosu na elemente ključno je za ovladavanje njihovom upotrebom.

Pročitajte dalje

O autoru