Parametri događaja u HTML elementima
Moderno programiranje, u grafičkom okruženju, je zasnovano na događajima (event driven), što znači da se program više ne izvršava "od početka do kraja", već je podeljen na celine koje se izvršavaju kada se "nešto desi". To "nešto" bude kada korisnik klikne na dugmence, pozove komandu iz menija, otkuca nešto i sl. Programiranje web aplikacija u velikoj meri preuzima ovaj koncept (iako ne obavezno) pa tako možemo da kreiramo delove programa pisane u JavaScript-u, koji će se izvršavati na osnovu nekih događaja.
HTML elementi su obično ti koji "primaju" događaje, što znači da mora postojati način da povežemo elemenat sa JavaScript programom. Jedan od najjednostavnijih načina je korišćenjem parametara događaja.
Parametri događaja (event attributes) su posebna vrsta HTML parametara. Nisu zaista "univerzalni" da svaki parametar događaja može da se koristi u baš svakom HTML elementu, ali za naše potrebe, možemo ih smatrati takvim.
Sa unapređivanjem tehnologije i potrebama za sve složenijim web aplikacijama, web čitači počinju da podržavaju ogroman broj događaja. Naravno, za svaki postoji odgovarajući parametar, ali mi ćemo se ovde upoznati samo sa nekoliko najpopularnijih. Mnogo detaljniji pregled očekujte da nađete u odeljku koji se bavi web DOM programiranjem.
- klik miša - click, dblclick, mousedown, mouseup
- pomeranje miša - mousemove, mouseout, mouseover
- događaji tastature - keypress, keydown, keyup
- događaji prozora - resize, scroll
- rad sa resursima - load, error, unload
Parametri događaja se uvode u HTML elemente korišćenjem prefiksa "on". To znači da ako želimo da naša stranica uradi nešto kada korisnik klikne na neki element (događaj click), u oznaku tog elementa ćemo dodati parametar onclick. Vrednost parametra će biti JavaScript program koji se izvršava u toj situaciji.
<div onclick="naredba; naredba;..."> Tekst </div>
Naš savet je da ne preterujete sa JavaScript naredbama, kada zadajete vrednost parametru događaja. I ovako smo "zaprljali" HTML, ne moramo još i da preterujemo. Držite se pravila da kao JavaScript navedete samo poziv funkcije koja onda "odrađuje posao" razrešavanja događaja (event handler).
Parametri događaja
Događaji miša
Ovo su događaji koji se aktiviraju ("opaljuju"), kada korisnik uradi nešto sa mišem. To može biti pritisak dugmeta ili pomeranje miša. Da pogledamo pojedine parametre događaja:
- onmousedown - prva polovina klika - kada se pritisne dugme, a još nije pušteno
- onmouseup - druga polovina klika - kada se otpusti dugme miša
- onclick - kada se na elementu desi kompletan klik mišem (svaki klik prvo ispaljuje pritisak i otpuštanje)
- ondblclick - dupli klik mišem (svaki dupli klik prvo ispaljuje dva obična klika)
- onmouseover - trenutak kada miš uđe u prostor elementa
- onmouseout - trenutak kada miš izađe van elementa
- onmousemove - pomeranje miša unutar prostora elementa
Događaji tastature
Slično kao sa događajima miša, koristimo događaje tastature kako bismo omogućili našoj web stranici da odreaguje kada korisnik koristi tastaturu.
- onkeydown - pritisak tastera na dole
- onkeyup - otpuštanje tastera
- onkeypress - kompletan pritisak tastera - prvo se aktiviraju i pritisak na dole i otpuštanje tastera
Događaji prozora
Ovi događaji izazivaju reakciju ako se elementu promeni veličina, odnosno skroluje njegov sadržaj.
- onresize - promena veličine (najčešće za body element)
- onscroll - skrolovanje sadržaja (za elemenat koji ima scroll-bar)
Događaji vezani za resurse
Ovi događaji se aktiviraju zavisno od stanja određenog resursa. Mogu se npr. vezati za sliku, video ili celu stranicu. Na primer, moguće je odreagovati ako slika ne uspe da se učita (događaj error). Dobra početna tačka za izvršavanje JavaScript programa je load događaj za <body> element. Isto tako, ako je potrebno obaviti određene radnje kada se stranica napušta, elementu <body> je moguće dodeliti i unload događaj.
- onload - učitavanje resursa (npr. stranice)
- onunload - oslobađanje memorije elementa (najčešće napuštanje ili reload stranice)
- onerror - ako se resurs nije učitao
Primer
Ovo je najprostiji primer pozivanja događaja. Primećujete da JavaScript koji dodeljujemo kao vrednost parametra događaja svodimo na poziv funkcije.
<script>
function klik()
{
// vezujemo promenljivu obj za element identifikovan kao "blok"
var obj = document.getElementById("blok");
// onda mu npr. menjamo sadržaj i boju teksta
obj.innerHTML = "Promenjen tekst.";
obj.style.color = "#900";
}
</script>
...
<div id="blok" onclick="klik()">Tekst unutar bloka.</div>
Primećujete da je funkcija klik() ekskluzivno vezana za div element "blok". Pogledajte primer koji se bavi ovakvim načinom obrade događaja.
Korišćenje this
U prethodnom primeru je problem što je funkcija koja razrešava događaj vezana samo za određeni HTML elemenat - nije univerzalna. Šta ako bismo želeli da napravimo funkciju koja će "raditi" za bilo koji element na koji se klikne? Ono što nam treba je način da funkciji nekako prosledimo element na koji je kliknuto, tako da ne moramo da ga povlačimo korišćenjem document.getElementById().
U JavaScriptu se ključna reč this odnosi na objekat iz čijeg konteksta je pozvana funkcija. Obratite pažnju na sledeći primer, koji ilustruje šta u stvari znači kada definišemo događaj.
Primer
<div id="blok" onclick="klik()">Tekst unutar bloka.</div>
... je isto kao da smo u JavaScriptu napisali:
<script>
var obj = document.getElementById("blok"); // ne moramo da vezujemo obj za "blok" ali tako je "čistije"
obj.onclick = function()
{
// OVDE objekat this referencira objekat na koji je kliknuto ali tu samo pozivamo funkciju klik()
klik();
}
function klik() // funkcija klik() treba da radi nešto korisno kada se klikne na element
{
// u funkciji klik() objekat this NEMA VEZE sa objektom na koji je kliknuto!
}
</script>
Pošto se pokazalo da this referencira elemenat na kome je izvršen događaj samo direktno unutar JavaScripta koji se navodi u parametru događaja, to jednostavno znači da funkciji koja obrađuje događaj moramo proslediti i objekat this.
Primer
U navedenim DIV elementima koristimo isti event handler, a ne moramo ni da ih identifikujemo -
this prenosi informaciju koja nam je potrebna
<div onclick="klik(this)">Prvi blok.</div>
<div onclick="klik(this)">Drugi blok.</div>
<script>
// funkcija klik() ima parametar obj u koji se prenosi referenca this iz poziva funkcije
function klik(obj)
{
// šta god radimo sa objektom obj desiće se sa elementom na koji je kliknuto
obj.innerHTML = "Promenjen tekst.";
obj.style.color = "#900";
}
</script>
- Mozilla Developer Network, Event attributes
- Mozilla Developer Network, Event reference