e-gradiva | HTML | CSS | JavaScript | Načrtovanje | |||||
SERŠ Maribor | Iskanje | Primeri |
Predmet event
je samodejno tvorjen z JavaScript ob zaznavi dogodka. Ima več lastnosti, ki omogočajo zaznavo tipa dogodka, položaj miškinega kazalca, čas dogodka in drugo. Vse lastnosti pa niso povezane z vsemi dogodki.
V času pred NN4 in IE4 so bile vse akcije zajete , ki so jih sprožili uporabniki ali sistem, lovljeni v glavnem z odelavo
dogodkov, definiranih v atributih znotraj značk HTML . Na primer, ko je uporabnik kliknil na gumb, je sprožil dogodek onclick
v znački. Ta procedura je lahko klicala določeno funkcijo ali izvršila nekaj notranjih ukazov
JavaScript. Vendar dogodki sami so bili enostavni: ali se je nekaj pripetilo ali pa se ni. Kjer se je dogodek pojavil (to so koordinate kazalca na zaslonu v trenutku ko je bil miškin gumb pritisnjen) in ostali primerni dogodki (na primer, če je bila tipka pritisnjena v istem času) niso bili izenačeni. Dokler niso prišli brskalniki 4. različice.
Četrta različica brskalnikov je obdržala popolnoma združljiv mehanizmom upravljanja dogodkov, je pa prva imela model dogodkov, ki je spremenil dogodke v prvo razredne predmete, katerih lastnosti samodejno nosijo veliko ustreznih informacij o dogodku, ko se pojavi. Te lastnosti so popolnoma dostopne skriptam, ki dopuščajo spletnim stranem, da se odzovejo intelegentneje o tem kar uporabnik dela s stranjo in njenimi elementi.
Nova možnost četrte različice brskalnikov je pojem dogodkovnega širjenja. Možno je bilo imeti dogodek, ki ga je sprožil predmet višje od vsebovanega elementa v hierarhiji, Tako si kadarkoli lahko več predmetov deli en dogodek. Vsi dogodki se lahko procesirajo na naki globalni osnovi in funkcije lahko upravljajo s predmetom, ki je sprožil dogodek, ali pa z nek drug predmet.
Grafični uporabniški vmesniki so težji za programiranje kakor staromodni ukazno vrstični vmesniki. Z ukazno vrstico ali menijsko vodenim sistemom so bili uporabniki namerno omejeni v akcijah, ki so jih izvedli v kateremkoli trenutku. Svet je bil izredno enoličen, kar je seveda odgovarjalo programerjem, ki so vodili uporabnike skozi toge programske strukture.
Vse to se je spremenilo s prihodom grafičnih uporabniških vmesnikov, kot je Windows, MacOS, X Window in vsi drugi, ki izvirajo iz začetnega dela Xerox Star System. Izziv programerjev je, da dober uporabniški vmesnik na tem področju, omogoča uporabnikom izvajanje raznih operacij v vsakem trenutku: premikanje miške, klikanje na gumbe, pritiskanje na tipke, označevanj besedila, izbra predmetov v meniju, in tako naprej. Da bi ugodili zahtevam mora biti program (ali še bolje operacijski sistem) pozoren na katerokoli možno aktivnost prihajajočo iz vseh vhodnih naprav, pa naj je to miška, tipkovnica ali omrežna povezava.
Da bi se to doseglo na stopnji operacijskega sistema, se običajno prestreza katerikoli dogodek, ne glede na to ali prihaja iz uporabniške akcije ali katerega računalnikovega vira. Operacijski sistem ali program nato pogleda kako bi naj procesiral za vsak dogodek posebej. Takšni dogodki kakorkoli morajo imeti nekaj podatkov o sebi, da program ve kaj in kje na zaslonu se je kaj zgodilo.
Spodnji primer gumb, ki takrat ko nanj kliknemo, prikaže opozorilno okno z napisanim tipom dogodka click
.
<input type="button" value="Tip dogodka" onclick='alert("Tip dogodka (event type) je " + event.type + ".")' />
screenX/screenY (NN4+)
event.type
event.x/y
(IE4+), event.clientX/clientY
(NN6+)button
(IE4+)Lastnost button lastnost pokaže kateri gumb oziroma gumbki so bili pritisnjeni za aktiviranje dogodka z miško. V primeru, ko ni klika z miško za generiranje dogodka, je ta vrednost enaka nič. Toda celoštevilčni tip (integer), vrednosti od 1 do 7, prikazuje enega in več pritisnjenih gumbov, je narejen za miško s tremi gumbi, če je le-ta prepoznana od operacijskega sistema. Celoštevilčne vrednosti ustrezajo klikom po sledeči shemi:
Vrednost | opis |
---|---|
0 | ni pritisnjenega gumba |
1 | levi (primarni) gumb |
2 | desni gumb |
3 | levi in desni gumb skupaj |
4 | srednji gumb |
5 | levi in srednji gumb skupaj |
6 | desni in srednji gumb skupaj |
7 | levi, desni in srednji gumb skupaj |
Bodite pazljivi na to, da ko uporabnik pritisne več gumbov hkrati, vsak klik sproži dogodek onmousedown
. Zato, če uporabnik klikne najprej levi gumb, se sproži dogodek onmousedown
, skupaj z dogodkom event.button
z vrednostjo 1
; takoj, ko je pritisnjen desni gumb, se znova sproži dogodek onmousedown
, toda tokrat z dogodkom event.button
z vrednostjo 3
. Če je skript namenjen izvedbam postopkov, ki so izrecno predpisani za oba pritisnjenima gumboma, bi moral ignorirati in ne izvajati postopkov za enojni klik.
Posebna pazljivost pri pisanju skriptov z lastnostjo event.button
za oba IE4+ in NN6+. W3C DOM model dogodkov definira različne vrednosti gumbov za klike (0, 1 in 2 za levo,srednje in desno) in nobenih vrednosti za več gumbov hkrati.
keyCode
(IE4+)Za dogodke tipkovnice lastnost keycode
vrne celoštevilčno vrednost ustrezno vrednosti Unicode (za dogodek onkeypress
) ali vrednosti črke (za dogodka onkeydown
in onkeypp
). Seveda je med tema dvema številčnima sistemoma velika razlika.
Če želite vrednosti Unicode (enako kot vrednosti ASCII za pisavo latin) za črko, ki jo je uporabnik pritisnil, uporabite lastnost keycode
. Na primer, mali a
vrne 97, medtem ko veliki A
vrne 65. Istočasno pa je pritisk tipke SHIFT sproži lastna dogodka onkeydown
in onkeyup
z vrednostjo keyCode
16. Ostali nečrkovni znaki, kot so puščice, navigatorji, funkcije, in podobni imajo svoje podobno določene kode. Te so zelo natančne, vsebujejo posebne tipkovne kode za numerične tipke, ki so drugačne od korespondentih števil na vrhnji vrsti alfanumerične tipkovnice.
SERŠ Maribor : Strokovna gimnazija : 2003 : Gregor Smogavec