Načrtovanje in razvoj spletnih aplikacij
Nazaj
Naprej

Dogodki v JavaScriptu

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!')" />
Slika

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  

Drugi dogodki

Dogodki objektov

  • 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
Nazaj
Naprej