Deo zbornika Učimo Javascript

Uvod u Javascript događaje

Email Twitter LinkedIn Facebook Google

Pomoću događaja oživljavamo stranice, odnosno činimo ih interaktivnim.

Događaje najčešće okidaju akcije korisnika (kao što su klik, mrdanje, tipkanje) ili učitavanje resursa (poput slika i podataka). Na događaje reagujemo povratnom funkcijom. Za svaki događaj na koji želimo da reagujemo, moramo dodati slušač događaja (event listener).

Događaji miša

Događaji miša su najčešći događaji na desktop računarima, jer se većina interakcije odvija preko miša. Neki od glavnih događaja miša su:

  • click
  • dblclick (dvoklik)
  • mousemove (pomeranje miša)
  • mouseenter (ulazak u element)
  • mouseleave (napuštanje elementa)
  • mousedown (stisak klika)
  • mouseup (puštanje klika)

Na primer, sledeća linija ispisuje trenutne koordinate miša prilikom svakog pomeranja:

document.onmousemove = e => console.log("x: " + e.clientX, "y: " + e.clientY)

Možete je isprobati u konzoli.

Događaji tastature

Dva glavna događaja tastature su pritiskanje i puštanje tipki:

  • keydown
  • keyup

Nisu svi elementi sposobni da slušaju događaje tastature, ali globalni document i input elementi jesu. Na primer, sledeća linija ispisuje brojčanu vrednost svakog pritisnutog znaka na tastaturi:

document.onkeydown = e => console.log(e.keyCode)

Događaji tastature se često koriste za špijuniranje korisnika. Neke aplikacije za dopisivanje registruju svaku stisnutu tipku i skladište podatke, bilo da ste zaista poslali poruku ili ne.

Događaji formulara

  • focus (ulazak u input polje)
  • blur (napuštanje input polja)
  • change (promena vrednosti polja)
  • submit (slanje formulara)

Globalni događaji

Globalni događaji se dodaju na document i window objekt.

  • DOMContentLoaded (izgradnja DOM-a, ide na document)
  • load (učitavanje, ide na window i razne elemente)
  • resize (menjanje veličine, ide na window)

Razlika između DOMContentLoaded i window.onload je veoma bitna. DOMContentLoaded znači da je HTML struktura učitana i pripadajući DOM objekat izgrađen, ali prikačeni resursi (slike, fontovi, skripte i ostalo) još nisu učitani, a window.onload reaguje kada su svi prikačeni resursi učitani.