Ko JavaScript program vključimo v HTML z uporabo oznake script
, se ta razčleni in tolmači takoj.
Program pa v JavaScript lahko vključimo tudi na drug način. Večina oznak v HTML ima lastnosti, s katerimi določimo reakcijo na določen dogodek. Tako lahko določimo, kaj naj se zgodi, ko uporabnik klikne na element, če pritisne tipko, spremeni vsebino ...
Reakcijo na dogodek lahko opišemo s programom v JavaScript. Tak program običajno napišemo čimkrajše, da struktura dokumenta HTML ostane pregledna. Taki programčki so največkrat samo prireditveni stavki ali klici vgrajenih funkcij, lahko pa pokličemo tudi svojo funkcijo, ki jo vključimo v HTML na običajen način z oznako script
.
Oglejmo si primer, kjer v HTML vključimo sliko, ki je občutljiva na klik. Ko kliknemo na sliko, se izvrši program, napisan kot vrednost lastnosti onClick
, ki prikaže opozorilno okno z napisom "Kliknil si sliko!".
<img src="slika.png" alt="Slika" onclick="alert('Kliknil si sliko!')" />
JavaScript HTML DOM dogodki
Seznam lastnosti, s katerimi lahko določimo reakcijo na različne dogodke.
Model dogodkov je standardizirala organizacija W3C v DOM stopnji 2. Novejši dogodki pa so standardizirani po DOM stopnji 3.
Dogodki miške
Dogodek |
Opis |
DOM |
onclick |
uporabnik klikne na element |
2 |
oncontextmenu |
uporabnik desno klikne na element, da se odpre kontekstni meni |
3 |
ondblclick |
uporabnik dvoklikne na element |
2 |
onmousedown |
uporabnik pritisne gumb miške na elemntu |
2 |
onmouseenter |
uporabnik postavi kurzor na element |
2 |
onmouseleave |
uporabnik odmakne kurzor z elementa |
2 |
onmousemove |
uporabnik premika kurzor nad elementom |
2 |
onmouseover |
uporabnik premakne kurzor na element ali na enega izmed njegovih otrok |
2 |
onmouseout |
uporabnik odmakne kurzor z elemnta ali enega izmed njegovih otrok |
2 |
onmouseup |
uporabnik spusti gumb miške na elemntu |
2 |
Dogodki tipkovnice
Dogodek |
Opis |
DOM |
onkeydown |
uporabnik pritiska tipko tipkovnice |
2 |
onkeypress |
uporabnik pritisne tipko tipkovnice |
2 |
onkeyup |
uporabnik spusti tipko tipkovnice |
2 |
Dogodki objkta/okvirja
Dogodek |
Opis |
DOM |
onabort |
nalaganje okvirja ali objekta je prekinjeno |
2 |
onbeforeunload |
brskalnik bo odstranil dokument iz objekta ali okvirja |
2 |
onerror |
napaka med nalaganjem zunanje datoteke |
2 |
onhaschange |
sprememba v sidernem delu URL-ja |
3 |
onload |
nalaganje okvirja ali objekta je končano |
2 |
onpageshow |
uporabnik obišče spletno stran |
3 |
onpagehide |
uporabnik zapusti spletno stran |
3 |
onresize |
spremenjena velikost dokumenta |
2 |
onscroll |
drsnik elementa je premaknjen |
2 |
onunload |
brskalnik je odstranil dokument iz objekta ali okvirja (za body) |
2 |
Dogodki obrazca
Dogodek |
Opis |
DOM |
onblur |
element obrazca je deaktiviran |
2 |
onchange |
vsebina elementa obrazca je spremenjena (za input, keygen, select, textarea) |
2 |
onfocus |
element obrazca je aktiviran |
2 |
onfocusin |
element obrazca bo postal aktiviran |
2 |
onfocusout |
element obrazca bo izgubil aktiviranost |
2 |
oninput |
v element obrzca je vnešena vsebina |
3 |
oninvalid |
element obrazca je neveljaven |
3 |
onreset |
v obrazcu je bil pritsnjen gumb reset |
2 |
onsearch |
v element obrazca je vpisan iskalni pojem (za input="search") |
3 |
onselect |
besedilo elementa obrazca je izbrano (za input in textarea) |
2 |
onsubmit |
v obrazcu je bil pritsnjen gumb submit |
2 |
Dogodki povleci/spusti (drag/drop)
Dogodek |
Opis |
DOM |
ondrag |
uporabnik vleče element |
3 |
ondragend |
uporabnik preneha vleči element |
3 |
ondragenter |
vlečeni element doseže cilj |
3 |
ondragleave |
vlečeni element zapusti cilj |
3 |
ondragover |
uporabnik povleče element na cilj |
3 |
ondragstart |
uporabnik povleče element |
3 |
ondrop |
uporabnik spusti element na cilj |
3 |
Dogodki odložišča
Dogodek |
Opis |
DOM |
oncopy |
uporabnik kopira vsebino elementa |
|
oncut |
uporabnik izreže vsebino elementa |
|
onpaste |
uporabnik prilepi vsebino elementa |
|
Dogodki tiskanja
Dogodek |
Opis |
DOM |
onafterprint |
stran se je začela tiskati ali je bilo zaprto pogovorno okno za tiskanje |
3 |
onbeforeprint |
stran je pripravljena na tiskanje |
3 |
Dogodki animacije
Dogodek |
Opis |
DOM |
animationend |
dogodek se zgodi, ko se animacija CSS konča |
3 |
animationinteration |
dogodek se zgodi, ko se animacija CSS ponovi |
3 |
animationstart |
dogodek se zgodi, ko se začne CSS animacija |
3 |
Dogodki prehodov
Dogodek |
Opis |
DOM |
transitionend |
CSS prehod je zaključen |
3 |
Dogodki poslani s serverja
Dogodek |
Opis |
DOM |
onerror |
dogodek se zgodi , ko pride do napake pri viru dogodka |
|
onmessage |
dogodek se zgodi, ko je poslano sporočilo preko vira dogodka |
|
onopen |
dogodek se zgodi, ko se odpre povezava z virom dogodka |
|
- konstante objektov
- lastnosti objektov
- metode objektov
- dogodki objektov miške
- dogodki objektov tipkovnice
- dogodki spremembe objektov
- dogodki objektov ob prehodu strani
- dogodki aktivnosti objektov
- dogodki animacij objektov
- dogodki prehodov objektov
- dogodki objektov kolesca miške