Event handling
JavaSrcipt se, kao i mnogi drugi skriptni jezici, izvršava sekvencijalno. Sa druge strane, kako pre svega služi za upravljanje ponašanjem web strana, sadrži i mehanizme koji omogućavaju odgovor na interakciju korisnika ili samog pretraživača sa stranom, u onom trenutku kada do te interakcije dođe. Ti mehanizmi nazivaju se „event handlers” (upravljači događajima).
Događaj je, kako je već rečeno, bilo koja interakcija pretraživača ili korisnika sa internet stranom. Kako se svi dešavaju nad elementima DOM stabla, nazivaju se i događajima DOM-a („DOM events”). Mogu se podeliti na:
1. Mouse events
2. Keyboard events
3. Frame/Object events
4. Form events
5. Drag events
6. Clipboard events
7. Print events
8. Media events
9. Animation events
10. Transition events
11. Server-sent events
12. Misc events
13. Touch events
Mouse events su događaji koji se realizuju pri interakciji strelice miša ili „scroll”-a (točkića) i internet strane. Keyboard events se realizuju pri interakciji tastature i strane. Predstavljaju odziv strane u odnosu na pritiskanje, držanje ili sklanjanje prsta sa nekog dugmeta na tastaturi. Frame/Object events tipično predstavljaju događaje koji ne moraju dolaziti od korisnika, kao što su kraj učitavanja nekog DOM elementa, greška u učitavanju spoljnog fajla, kada se zaustavi učitavanje resursa... ali se odnose i na neke događaje koji jesu vezani za korisničku interakciju, kao što je promena veličine prozora ili „skrolovanje”. Form events se događaju pri interakciji korisnika sa nekom formom, poput promene sadržaja input elemenata, resetovanja forme ili slanja („submit”). Drag events se događaju kada se element „vuče” mišem. Clipboard events omogućavaju strani da reaguje na kopiranje, sečenje i lepljenje („copy”, „cut”, „paste”) sadržaja unutar elemenata. Print events se dešavaju odmah pre nego što strana počne da se štampa, ili u trenutku kada započne sa štampanjem. Media events su reakcije na različite promene stanja media fajlova (zvučni fajlovi, video fajlovi...). Animation events se realizuju pri izvršavanju CSS animacija. Mogu se vezati za početak, ponavljanje i kraj animacije. Transition events sastoje se, zapravo, samo iz jednog događaja – kraja CSS tranzicije. Server-sent events izvršavaju se u tri slučaja: kada se desi greška na izvoru događaja, kada dođe do prijema poruke sa izvora događaja i kada se otvori konekcija sa izvorom događaja. Misc events su razni nesvrstani događaji. Touch events predstavljaju događaje izazvane interkacijom korisnika i ekrana osetljivog na dodir („touch screen”) i tipično se dešavaju kada se internet strana pregleda na nekom pametnom telefonu, tabletu i sl.
Dalje će biti dati primeri najčešće korišćenih događaja, kao i neke naprednije teme poput događaja baziranih na vremenu, propagacije događaja i korišćenja „callback” funkcija (o kojima će biti reči u kasnijim poglavljima).
Onload event handler
Prvi event handler koji će biti obrađen je onload. Događaj koji mu odgovara je kraj učitavanja nekog DOM elementa. Posebno je koristan kada želimo da „odložimo” izvršavanje skripte na trenutak kada je web strana završila učitavanje, a tada se najčešče i koristi.
Naime, CSS kod je uputno staviti na početak HTML dokumenta, jer ne bi imalo puno smisla da učitavamo stranu bez stilova i „layout”-a, pa da ih tek nakon toga primenjujemo. Iz tog razloga se link tagovi obično stavljaju unutar head taga. Sa druge strane, većina funkcionalnosti i animacija koje izvršava JavaScript, dešavaju se u već učitanoj strani. Jedan pristup je da se script tag nalazi na samom dnu body elementa. Kako se, zbog čitljivosti, i JavaScript kod ili link ka JavaScript dokumentu nalaze u head-u, kod se enkapsulira u onload event handler. Time se kraj učitavanja svih HTML elementa i CSS pravila eksplicitno određuje kao početni trenutak izvršavanja skripte.
Ovo se može uraditi na više načina. Prvi primer pokazuje korišćenje event handler HTML atributa:
Drugi primer je korišćenje onload atributa window elementa direktno iz JavaScript-a:
Oba primera imaće isti rezultat – kada se strana učita, prikazaće se alert box sa porukom „I have loaded!”. Naravno, u realnoj situaciji, unutar anonimne fuknkcije koja se poziva bio bi obuhvaćen sav JavaScript kod na toj strani, ili barem onaj deo koji je potrebno pozivati nakon što je strana učitana.
Mouse events
Kao što je prethodno napomenuto, Mouse events podrazumevaju najrazličitije akcije izvršene upotrebom miša. Onclick event handler podrazumeva funkciju koja će se izvršiti u slučaju da korisnik jednom klikne mišem na unapred definisan element na stranici. Opšti oblik upotrebe:
<button onclick="funkcija()">Klikni</button>
Sada pogledajmo dva primera koji ilustruju rad ovog handler-a.
U ovom primeru, obradili smo događaj klika na dugme, tako što smo napisali inline funkciju kojom pristupamo paragrafu čiji je id vreme i menjamo mu sadržaj. Za tu svrhu iskristili smo svojstvo innerHTML.
Naravno, ovaj handler možemo iskoristiti na bilo kom elementu na našoj stranici.
U ovom slučaju, pozivamo funkciju koju smo definisali u okviru script tagova a koja ima dva ulazna parametra. Prvi je element na koji će se akcija primeniti, u našem primeru to je upravo paragraf na koji je potebno kliknuti, pa zato prosleđujemo this. Drugi predstavlja boju kojom ćemo obojiti dati paragraf.
Javascript, naravno, podržava i događaj dvostrukog klika mišem. Celokupna primena se izvodi analogno situaciji kada smo implementirali onclick event handler. Jedina razlika je što bismo u ovoj situaciji koristili ondblclick handler. Sledeća dva događaja koja ćemo obraditi su onmouseenter i onmouseleave. Oni se najčešće pojavljuju u paru i to u situacijama kada želimo da na neki način promenimo element preko koga korisnik pređe kursorom. Da bi detaljnije ovo pojasnili, pogledajmo sledeći primer:
U prethodnom primeru smo definisali jedan div ciji je id demo, a koji ćemo koristiti kako bi pristupili baš tom elementu u funkcijama. Inicijalno, boja tog diva je plava. Preko funkcija koje odgovaraju događajima onmouseenter i onmouseleave menjaćemo boju tog diva.
Keyboard events
Sada ćemo obraditi događaj onkeypress. Odnosno, prikazaćemo upotrebu sledeća dva događaja: • Onkeydown • Onkeyup Razlog je u tome što kombinacija upravo ova dva događaja predstavlja prvobitno navedeni onkeypress.
Naravno, veoma često se susrećemo sa različitim prečicama koje možemo iskoristiti u mnogim veb aplikacijama. Prirodno, postavlja se pitanje kako obraditi događaj kada korisnik pritisne kombinaciju dva ili više dugmeta. Upravo u sledećem primeru, obradićemo takvu situaciju.
Počnimo od samog poziva funkcije. Ova notacija, document.onkeydown = kombinacija; , samo je još jedan način za aktiviranje event handlera, kada želimo da to izvršimo u okviru neke skripte. Analogno tome, mogli smo u prethodnim primerima napisati i object.onkeydown=function. Sledeće što možemo primetiti je kreiranje objekta ovog događaja, evtobj. Ovo činimo kako bi saznali koja kombinacija dugmića je pritisnuta. Neki od njih su unapred definisani, kao što su ctrl, alt, shift, a ostalima se pristupa preko svojstva keyCode koje ima različite vrednosti u zavisnosti od toga koje je dugme u pitanju. U našem slučaju, ispituje se da li je vrednost tog svojstva 90 jer je upravo to kod koji odgovara slovu z na tastaturi. Ceo spisak ovih kodova možete pogledati ovde.
Još jedan često korišćeni handler je onsubmit. Upravlja ponašanjem strane nakon potvrde forme, tj. „submit”-ovanja:
Kada korisnik klikne na dugme „Završi”, koje je tipa submit, „okida” se onsubmit event handler. Iz text box-a se uzima uneti tekst i prikazuje unutar
elementa ispod forme. Kako se, po „default”-u, stranica ponovo učitava pri submit event-u, poziva se i funkcija alert() koja zadržava to stanje kako bi efekat bio očigledan.
U realnoj situaciji, nakon ovog događaja bi se pozivala funkcija koja upravlja validacijom podataka, obaveštavanjem korisnika o eventualnim greškama i slanja podataka serveru tj. preuzimanja podataka sa servera.