Dogadjaji i akcije

DOGADJAJI I AKCIJE (Events/Event handlers)

Pod dogadjajima na web strani podrazumeva se svaka akcija korisnika ili akcija u procesu učitavanja stranice. Web developeri ne pišu dogadjaje (events) jer su dogadjaji već definisani u Java Scriptu. Znači, klik mišem na link ili na sliku je dogadjaj koji JavaScript podvodi pod onclick dogadjaj. Takodje, pretraživač tu akciju odlično razume. Na nama je da vidimo koji su, od mnogobrojnih, već definisanih dogadjaja, nama interesantnih. Prostije rečeno, koji od dogadjaja možemo da iskoristimo kako bi ostvarili efekat koji želimo da postignemo.

Postoji nekoliko metoda pisanja event handler-a.

Prvi je pisanjem direktno unutar taga. Primer:

<button onclick=alert(‘Dobar dan!’)>Klikni</button>

Ovaj metod nije preporučljiv jer se kod ne može koristiti na drugim mestima (ovaj primer nije reprezentativan već je dat samo radi primera sintakse). Drugi razlog je mešanje HTML-a i JavaScripta. Treći je što u slučaju da Java Script nije omogućen u okviru pretraživača, nemamo načina u slučaju ovakvog pisanja da se sa tim izborimo.

Drugi način koristi metod pod imenom addEventListener.

document.addEventListener(‘ime_dogadjaja’,’ime_funkcije’, false);

Problem ovog načina je što je njegova primena različita do jednog do drugog pretraživača, tj. nije cross-browser kompatibilna pa se kod piše “duplo” a i greške koje se pojave teže je rešiti.

Treći metod je preferiran i onaj koji ćemo učiti. Sintaksa ovog načina reakcije na odredjene evente je sledeća:

ime_elementa.ime_dogadjaja = function(){

// java script kod koji će se izvršiti

};

U sintaksi primećujete da iza imena function ne stoji ime funkcije kao što smo do sada radili. Takva vrsta funkcije u programiranju se naziva anonimna funkcija. Zašto je koristimo? Kao i u prethodnim slučajevima, da odredjeni kod stavimo na jedno mesto i izvršavamo ga kao celinu. Zbog čega nam nije potrebno imenovanje funkcije? Iz prostog razloga što deo koji se nalazi ispred znaka jednako tačno govori nad kojim elementom i kada ovaj kod treba da se izvrši.

Na primer:

mojElement.onclick=function(){

alert(‘Kliknuli ste na moj element!’);

}

NAPOMENA: Na kraju, iza zatvaranja vitičaste zagrade stoji znak ; Ovaj znak nije namenjen funkciji već završetku Java Script iskaza.
ONCLICK

Ovaj dogadjaj se izvršava kada kliknemo mišem unutar web strane na definisani element, kao što smo već rekli. Ono što je zanimljivo je da element može da bude i ceo document, tj. klik mišem bilo gde unutar stranice proizvešće dogadjaj onclick. Daćemo primer:

document.onclick=function(){
alert(‘Kliknuli ste negde unutar strane!’);
};

Ako na primer, imamo sliku nutar strane sa id-jem neka_slika, i želimo da izvršimo akciju u momentu kada korisnik klikne iznad nje, napisaćemo:

var slika=document.getElementById(‘neka_slika’);
slika.onclick=function(){
alert(‘Kliknuli ste na sliku!’);
};

Sada će se ovaj kod izvršavati svaki put kada kliknete u okvir u kome se nalazi slika. Ako ovaj kod ostane na strani zajedno sa prethodnim, nakon što kliknete na sliku i zatvorite iskačući prozor, pojaviće se i drugi prozor. Zašto? Pored klika na sliku, ispunjen je I uslov klika bilo gde u okviru dokumenta.

Postoji jedna bitna stvar u ovom primeru koju nismo pomenuli. Ukoliko ovaj Java Script kod stavimo na početak dokumenta, postoji velika šansa da se on ne izvrši. Zašto? Mi u kodu pozivamo elemente koji se još nisu učitali na primer sliku, pa JavaScript u momentu kada se poziva nema element nad kojim treba da izvrši odredjenu akciju.

Iz tog razloga, dobra praksa je da se sav JavaScript kod uslovi završetkom učitavanja kompletne stranice pre izvršenja. To se postiže dogadjajem onload koji govori Java Scriptu da sačeka sa učitavanjem celokupnog html koda pre nego što se učita. Kod kojim se ovo postiže je:

window.onload=function(){
// sav JS kod koji zelimo da se izvrsi
}

Otkud element window?

window je element koji nismo pominjali u DOM hijerarhiji. On se nalazi iznad elementa document I obuhvata, pored prozora pretrazivaca koji obuhvata document element, celokupan pretrazivac, ukljucujuci statusnu liniju, scrollbar-ove I sve sto obuhvata prozor aplikacije.

NAPOMENA: Treba biti prilicno oprezan sa pozivanjem window.onload() u smislu da, ukoliko postoji vise window.onload blokova koda na stranici, izvrsice se samo poslednji koji se poziva.

 

ONFOCUS I ONBLUR

Ove dve funkcije su komplementarne I izuzetno se koriste u formama.

ONFOCUS dogadjaj predstavlja momenat kada kliknemo unutar input taga, tj. ukoliko kliknemo unutar polja u koje se unose neki podaci, na primer ime ili broj telefona. Pored klika misem, ovaj dogadjaj se inicira I ako u polje dodjemo putem pritiska TAB koji nas iz prethodnog polja dovodi u njega.

ONBLUR dogadjaj je dogadjaj koji se inicira kada izadjemo iz polja, tj. ili kliknemo negde unutar strane ili predjemo na sledece polje klikom misa ili pritiskanjem taster TAB. Da bi malo pojasnili pokazacemo na primeru. U ovom primeru zelimo da kada je korisnik van polja ime, u njemu bude prikazan tekst “Molimo vas unesite svoje ime” a kada korisnik klikne na njega taj tekst nestane. Takodje, ukoliko korisnik nakon sto je usao u njega, izadje bez popunjavanja podatak, taj tekst ponovo bude prikazan.

HTML kod polja nad kojim izvrsavamo ove akcije :

Ime: <input name=”ime” id=”ime” value=”Molimo vas unesite svoje ime”>

Java Script ce izgledati:

 

var polje_ime=document.getElementById(‘ime’);

 

polje_ime.onfocus=function(){

if(polje_ime.value == “Molimo vas unesite svoje ime”){

polje_ime.value=””;

}

};

 

polje_ime.onblur=function(){

if(polje_ime.value == “”){

polje_ime.value=” Molimo vas unesite svoje ime”;

}

};

Sta ovaj kod govori. Ukoliko je pri ulasku u polje (onfocus) vrednost u polju “Molimo vas unesite svoje ime” isprazni ga. Druga funkcija kaze: ukoliko korisnik izadje iz polja (onblur) I ne ukuca nista, promeni njegovu vrednost na “Molimo vas unesite svoje ime”.

Naravno, ne zaboravite da ovo ubacite unutar window.onload dogadjaja.

Preporučite ovaj članak:
Email this to someoneShare on Google+Share on FacebookShare on LinkedIn