Reakcija na događaje u JavaScript-u


Obrada događaja

JavaScript programi mogu prekinuti sekvencijalno izvršavanje otkrivanjem događaja i reakcijom na njega. Događaj predstavlja akciju koja se desila unutar navigatora kao što je, na primer, klik korisnika ili pritisnuta dirka na tastaturi ili učitavanje slike...
 Jedna od najmoćnijih karakteristika JavaScript-a jeste detektovanje i odziv na događaj (event handler) i to daje statičnom HTML dokumentu izvesnu interaktivnost.
 Događaj se može desiti na više mesta, ali svaki događaj je u vezi sa nekim objektom i svaki događaj ima svoje ime. Događaj onMouseOver nastaje prelaskom pokazivača miša preko objekta na web strani i tada se poziva (ako postoji) onMouseOver obrada događaja.

Događaj Objekat u kom se koristi događaj
onAbort
onBlur
onChange
onClick
onError
onFocus
onLoad
onMouseOver
onMouseOut
onSelect
onSubmit
onUnload 		image
select, text, text area
select, text, textarea
button, checkbox, radio, link, reset, submit, area
image
select, text, textarea
windows, image
link, area
link, area
text, textarea
form
window

onAbort:

Događaj onAbort se dešava kada korisnik zaustavi Web stranu pre nego se ucita slika.

Pogledajte primer (koji prolazi W3C validaciju!!!) 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<TITLE>  Primer onAbort 

</HEAD>

<BODY>
<H3>Primer onAbort </H3>
<strong>Zaustavite ucitavanje slike i pratite sta se desava-ukljucuje se ALERT dijalog:</strong>
<p>
<script language="JavaScript" type="text/javascript">
<IMG SRC="bkgr2.jpg" onAbort="alert('Zaustavili ste ucitavanje slike!')" ALT="slika">
</script>
</BODY>

</HTML>

onBlur:

Događaj onBlur nastaje kada se ulazni fokus premesti sa elementa polja text, textarea, ili select u formularu. Za prozore i okvire događaj nastaje kada prozor izgubi fokus. U prozorima obrada događaja se postavlja kao <BODY> atribut. Na primer:

<BODY BGCOLOR='#ffffff' onBlur="document.bgcolor='#000000'">
Napomena: Na Windows platformi onBlur obrada ne radi uvek unutar <FRAMESET>.

Pogledajte primer

<HTML>
<TITLE>Primer onBlur</TITLE>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function valid(form){
    var input=0;
    input=document.myform.podatak.value;
	if (input<0){
	    alert("Uneli ste negativan ceo broj");
	}
}
</SCRIPT>
</HEAD>
<BODY>
<H3> Primer onBlur </H3>
Ako unesete negativan broj pojava ALERT dijaloga:<br>
<form name="myform">
 <input type="text" name="podatak" value="" size=10 onBlur="valid(this.form)">
</form>
</BODY>
</HTML>
U ovom primeru imenovano text polje 'podatak' prihvata vrednost koju unosi posetilac. Kada posetilac pokusa da napusti polje događaj onBlur poziva funkciju valid() radi potvrde da polje 'data' je popunjeno nenegativnim brojem, a u suprotnom izdaje se alert dijalog. Kljucna rec this je upotrebljena da bi se referisalo na tekuci objekat.

onChange:

Događaj onChange nastaje pri promeni vrednosti u poljima formulara.

Pogledajte primer konvertora valuta:

U ovom primeru postoje dva text polja: id='dinari', id='evri'. Pri napustanju jednog polja nakon editovanja vrednosti (bilo sa backspace, bilo dodavanjem,...) posetiocu se ispisuje konvertovana vrednost u drugo polje kao posledica obrade događaja onChange i poziva ili funkcije postaviVrednostEvra(dinari) ili postaviVrednostDinara(evri). Ako se ne desi editovanje polja, ne ispisuje se vrednost. Ako se desi editovanje polja belinom, ispisuje se vrednost 0. 


<html>
<head>
<title>Konverzija valuta</title>

<script type='text/javascript'>
var kurs = 94.80;
function postaviVrednostEvra(dinari) {
	document.getElementById('evri').value = dinari/kurs;
}
function postaviVrednostDinara(evri) {
	document.getElementById('dinari').value = evri * kurs;
}
</script>

</head>
<body>
<table>
<tr>
<td>Dinari: </td> 
<td><input type='text' id='dinari' onChange="postaviVrednostEvra(this.value)"></td>
</tr>
<tr>
<td>Evri: </td>
<td><input type='text' id='evri' onChange="postaviVrednostDinara(this.value)"></td>
</tr>
</body>
</html>

Pogledajte primer:

U ovom primeru 'podatak ' je text polje. Pri napustanju polja nakon editovanja vrednosti (bilo sa backspace, bilo dodavanjem,...) posetiocu se ispisuje alert dijalog kao posledica obrade događaja onChange i poziva valid() funkcije. Ako se ne desi editovanje polja, ne ispisuje se ni dijalog. 

<HTML>
<TITLE>Primer onChange</TITLE>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function valid(form){
    var input=0;
    input=document.myform.podatak.value;	
    alert("Vrednost  polja je promenjena sa  10 na  " + input );
}
</SCRIPT>
</HEAD>
<BODY>
<H3>Primer</H3>
Promenite vrednost polja sa 10 na neku drugu i pratite desavanja:<br>
<form name="myform">
 <input type="text" name="podatak" value="10" size=10 onChange="valid(this.form)">
</form>
</BODY>
</HTML>

onClick:

Događaj onClick nastaje kada se klikne dugme formulara (button, radio, reset, submit), ili hiperveza, ili se potvrdi checkbox ili se selektuje zona slike koja je mapa. Sem za polje tipa button ili zonu mape, događaj onClick može vratiti false radi otkaza akcije. Na primer: 

<INPUT TYPE="submit" NAME="mysubmit" VALUE="Submit" onClick="return confirm(`Sigurni ste da zelite obradu formulara?')">
<A onclick="alert('Google  Search Engine!');" href="http://www.google.com/">Link na Google</A> <BR>
Note: Pod Windows platformom događaj onClick moze da ne funkcionise sa reset dugmetom.

U narednom primeru, kada se desi događaj onClick, poziva se funkcija valid koja ispisuje alert pozdravnu poruku posetiocu.
Pogledajte primer:

<HTML>
<TITLE>Primer onClick </TITLE>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function valid(form){
    var input=0;
    input=document.myform.data.value;	
    alert("Pozdrav " + input + " ! Srecno...");
}
</SCRIPT>
</HEAD>
<BODY>
<H3> Primer onClick </H3>
Kliknite na dugme nakon unosa imena u text polje:<br>
<form name="myform">
 <input type="text" name="data" value="" size=10>
<INPUT TYPE="button" VALUE="KLIKNITE" onClick="valid(this.form)">
</form>
</BODY>
</HTML>

U narednom primeru, kada se desi događaj onClick, poziva se funkcija proveri koja ispisuje alert poruku posetiocu koje dugme je čekirano.
Pogledajte primer:

<html>
<head>
<script type='text/javascript'>
	function proveri() {
		if (document.getElementById('chk1').checked)
			alert('Prvi cekiran');
		if (document.getElementById('chk2').checked)
			alert('Drugi cekiran');
	}

</script>
</head>
<body>
Chk1: <input type='checkbox' id='chk1'> <br>
Chk2: <input type='checkbox' id='chk2'> <br>
<input type='button' value='Pritisni' onClick = 'proveri();'>
</body>
</html>

onError:

Događaj onError se desava kada ako ne postoji ili je nekorektna datoteka koja cuva sliku ili dokument koji se ucitavaju. Nastajanjem onError događaja mogu se iskljuciti standardne JavaScript poruke o gresci i koristiti korsnicke funkcije radi pracenja greski. U tu svrhu dovoljno je postaviti window.onerror=null i pozvati funkciju za obradu greski onError="myerrorfunction()".

Pogledajte primer: 

<HTML>
<TITLE>Primer onError</TITLE>
<HEAD>
<SCRIPT Language="JavaScript">
window.onerror = ObradaGreske

var e_msg="";
var e_file="";
var e_line="";

document.form[8].value="myButton"; //GRESKA

function ObradaGreske(msg, file_loc, line_no) {
	e_msg=msg;
	e_file=file_loc;
	e_line=line_no;
	return true; 
}

function prikaz() {
	var   error_d = "Greska u datoteci: " + e_file + 
      		            "\nredni broj linije:" + e_line +
	      	             "\ntip:" + e_msg;
	alert("Greska:\n"+error_d);
		
}

</SCRIPT>
</HEAD>

<BODY>
<h3> Primer onError  </h3>
<form>
<input type="button" value="PRIKAZI GRESKU" onClick="prikaz()"></form>
</body>
</HTML>
Funkcija ObradaGreske() prihvata tri argumenta: URL, redni broj linije i tekst greske. Putem alert metoda se vrsi njihov ispis u korisnickoj funkciji prikaz()

Napomena: Ako se funkcija ObradaGreske() postavi da vraca False, prikazuje se standardni dijalog.

onFocus:

Svi elementi formulara podrzavaju i obradu događaja sa onFocus() i onBlur(), koji se pozivaju kada ulazno polje dobije, odnosno, izgubi ulazni fokus sa tastature.
Osim njih, svaki element formulara ima i odgovarajuce metode focus() i blur()koji usmeravaju ili uklanjaju fokus sa nekog ulaznog polja.
Pogledajte primer: 
<FORM><INPUT onfocus="window.status='Tekst u statusnoj liniji';" size=30> 
</FORM>

<HTML>
<HEAD><TITLE>Event Handler: onFocus</TITLE>
</HEAD>
<BODY>


<FORM><INPUT type="text" onfocus="window.status='Tekst u statusnoj liniji';" size=30> </FORM><BR>

<FORM>Ime: <INPUT type="text" onblur="alert('Da li ste upisali ime?');" size=30 value="Upišite ime"> </FORM>
<BR>
</BODY>
</HTML>
Vezba za samostalni rad: kreirati formular sa tri elementa - textbox, 2 checkbox-a i submit dugme.
Napisati skript koji:

onLoad:

Događaj onLoad pojavljuje se kada se učita slika ili prozor. Za prozor se reakcija na događaj specificira kao atribut taga BODY . Primer: 
<IMG NAME="slika" SRC="slika.gif" onLoad="alert('UCITANA SLIKA')">
Pogledajte primer: 
<HTML>
<TITLE>Primer onLoad </TITLE>
<HEAD>
<SCRIPT LANGUGE="JavaScript">
function pozdrav(){
    alert("Pozdrav...\nPrimer onLoad.");
}
</SCRIPT>
</HEAD>
<BODY onLoad="pozdrav()">
<H3>PRIMER onLoad </H3>
</BODY>
</HTML>
U ovom primeru funkcija pozdrav se poziva() kao reakcija na događaj onLoad .

onMouseOver:

JavaScript kôd se poziva kada se mišem pređe preko hiperveze ili objekta.
Pogledajte primer:
<HTML>
<TITLE>Primer onMouseOver </TITLE>
<HEAD>
</HEAD>
<BODY>
<H3> Primer onMouseOver </H3>
Pozicionirajte miš preko <A HREF="" onMouseOver="window.status='Pozdrav!  Kako ste danas?' ; return true;"> 
ove pozicije</a> i pogledajte na status bar ( npr. dno prozora).
</BODY>
</HTML>
U gornjem primeru kada se pređe mišem preko hiperveze ispisuje se poruka u status baru.

onMouseOut:

JavaScript kôd se poziva kada mišem se pređe van hiperveze ili objekta.
Pogledajte primer: 
<HTML>
<TITLE> Primer onMouseOut </TITLE>
<HEAD>
</HEAD>
<BODY>
<H3> Primer onMouseOut  </H3>
Pozicionirajte miš preko <A HREF="" onMouseOut="window.status='NAPUSTILI STE LINK!' ; return true;"> 
hiperveze ovde</a> i onda napustite hipervezu i pogledajte status bar.
</BODY>
</HTML>
U gornjem primeru kada se pređe mišem preko hiperveze i potom napusti hiperveza, ispisuje se poruka u status baru.

Moguce je isprogramirati reakciju na oba dogadjaja onMouseOut i onMouseOver na jednom objektu, na primer slici kao u ovom primeru

onReset:

Događaj onReset se izvršava kada korisnik resetuje formular putem klika na dugme RESET.

Pogledajte primer:

<HTML>
<TITLE>PRIMER onReset </TITLE>
<HEAD></HEAD>
<BODY>
<H3> Primer onReset  </H3>
Molimo Vas, popunite text polje i kliknite na dugme reset:<br>
<form name="myform" onReset="alert('OPREZ! RESETOVALI STE FORMU')">
 <input type="text" name="data" value="" size="20">
<input type="reset" Value="Reset" name="myreset">
</form>
</BODY>
</HTML>

 
Obrada događaja tastature

          Datoteka pr81.htm


<html>
<head>
<title> Tasteri </title>
<script language="javascript" type="text/javascript">
   function PrikaziTaster(t) {
      if (t.keyCode) keycode=t.keyCode;
         else keycode=t.which;
      znak=String.fromCharCode(keycode);
      window.status += znak;
   }

</script>
</head>
<body onKeyPress="PrikaziTaster(event);">
<h1 align="center">Prikaz tastera</h1>
<HR>
<p><strong> <i>Ako pritisnete tastere na tastaturi, skript iz ovog dokumenta prikazuje
sadrzaj u statusnoj liniji.</I></STRONG>  </p>
<hr>
<p>&nbsp;</p>
</body>
</html>

Ovaj primer prikazuje kao rezultat pritisnute dirke u statusnoj liniji.
  NN 4.0 nije mogao da radi sa skriptovima ovog tipa, jer nije mogao da otkrije akciju nad tastaturom. Ali JavaScript 1.2 i kasnije verzije mogu da otkriju i ove akcije. Glavna procedura za obradu događaj je onKeyPress koja se pojavljuje kada je taster pritisnut i pusten ili kada se drzi pritisnutim. Kao i kod miša, moze se otkriti donji i gornji deo pritisnutog tastera uz događaje onKeyDown i onKeyUp.
  Sadrzaj pritisnutog tastera se otkriva pomocu event objekta koji se salje proceduri za obradu događaja. Kod NN svojstvo event.which cuva ASCII kod karaktera za taster, dok u IE to cuva event.keyCode.
  Za pretvaranje numerickog ASCII koda u string ekvivalent sluzi metod fromCharCode.
   U primeru prikaz tastera u statusnoj liniji se obavlja u f-ji PrikaziTaster
   function PrikaziTaster(t) {
      if (t.keyCode) keycode=t.keyCode;
         else keycode=t.which;
      znak=String.fromCharCode(keycode);
      window.status += znak;
   }

  Ulazni parametar funkcije je event objekat (dobijen od procedure za obradu događaja-videti telo i oznaku <body>). F-ja proverava da li postoji svojstvo t.KeyCode  i ako postoji cuva se u promenljivoj
keycode. Inace, keycode dobija ASCII vrednost t.which.
   Potom se obavi konverzija sa dodelom
znak=String.fromCharCode(keycode);
 tj. znakovni ekvivalent ASCII keyCode se upisuje u promenljivu znak, a potom izvrsi i konkatnacija sa sadrzajem statusne linije.
 
 
 
 
 
 

           Napomene

1. Događaj onMouseOver se može koristiti za etiketu <IMG>, ali to je podrzano od strane IE i NN6, ali ne u ranijim verzijama Netscape-a. Tada je zgodno napraviti sliku kao hipervezu (ukinite okvir) i u okviru oznake <A> pozivati procedure za obradu događaja.

2. Ako postoje i onKeyDown i onKeyPress procedure za obradu događaja, prvo se poziva onKeyDown kada se pritisne taster, a ne obe. Ako se vrati true, onda se poziva obrada onKeyPress, a inace se ne generise događaj onKeyPress.
 
 
 
 
Obrada događaja miša

  Pogledajte primer


<html>
<head>
<title>Opisne hiperveze</title>
<script LANGUAGE="JavaScript">

function OpisVeze(text) {
    window.status = text;
    return true;
}
function Eliminisi() {
     window.status="";
}

</script>
</head>
<body>
<h1 align="center">Opisne hiperveze</h1>
<hr>
<p align="center"><strong><i>Dole navedena lista hiperveza
sadr&#382;i i opise koji se prikazuju u statusnoj liniji nakon prelaska mi&#353;a preko hiperveze </I> </strong></p>
<hr>
<ol> Numerisana lista hiperveza ka dokumentima o JavaScript-u
<li><a HREF="skolajs5.htm"
    onMouseOver="OpisVeze('Peti nastavak'); return true;"
    onMouseOut="Eliminisi();">
Animacija u JavaScript-u</a>
<li><a HREF="skolajs6.htm"
    onMouseOver="OpisVeze('JavaScript i plug-in'); return true;"
    onMouseOut="Eliminisi();">
Zvuk u JavaScript-u</a>
<li><A HREF="skolajs3.htm"
    onMouseOver="OpisVeze('Detektovanje podataka o navigatoru putem JavaScript-a'); return true;"
    onMouseOut="Eliminisi();">
Podaci o navigatoru</a>
</ol>
<hr>
<P>&nbsp;</p>
</body>
</html>
 
 
 

Ako se pogleda izvorni kod datoteke pr82.html uočava se da dominantna akcija jeste dodavanje opisa hiperveze prirodnim jezikom, a sadržaj se prikazuje u statusnoj liniji. To može biti zgodno ako se nastrani nalaze hiperveze ka formularima, pa se na taj način sam formular zadaje deskriptivnije (e-narudžbenice, plaćanje,...).
   Tekst poruke se ispisuje onMouseOver procedurom za obradu događaja, a uklanja se onMouseOut procedurom za obradu događaja, tj. svaki link tela dokumenta sadrži pozive dve funkcije. Skript radi u svim JavaScript enabled browser-ima.
   U statusnoj liniji se uglavnom ispisuje Intenet adresa objekta na koji vodi hiperveza što često nije dovoljno deskriptivno, te bi sadržaj poruka koja se navode kao argument (u ovom primeru korisničke funkcije) OpisVeze morao biti sadržajniji i dovoljno jasan.

Hiperveza sa procedurom za obradu događaja koji prikazuje poruku u statusnoj liniji glasi
       <a HREF="skolajs6.htm"
    onMouseOver="OpisVeze('JavaScript i plug-in'); return true;"
    onMouseOut="Eliminisi();">
         Zvuk u JavaScript-u
        </a>

Uočite da tekst poruke je ograđen jednostrukim, a ne dvostrukim znacima navoda. To je NEOPHODNO, jer se dvostruki znak naovoda koristi da ogradi sam poziv procedure za obradu događaja. Moguće je upotrebiti i jednostruke znake navoda oko procedure za obradu događaja, ali dvostruke znake navoda unutar skript iskaza.

   Neophodan je iskaz return true; da bi sprečio da se poruka statusne linije prepiše po prikazu Internet adrese. U f-ji OpisVeze ulazni parametar je tekst poruke koji se u f-ji kopira u statusnu liniju dodelom sadržaja za window.status.
   Kako f-ja vraća vrednost true,  to se poruka prikazuje u statusnoj liniji sve dok ne bude izbrisana ne Internet adresom, već rezulattom f-je  Eliminisi kao reakcijom na onMouseOut događaj.
function Eliminisi() {
     window.status="";
}
 
 
 
  JavaScript sadrzi objekat event koji obezbeđuje informacije o događaju.
 
 

IE event
 (pocev od verzije 4.0) 
NN event
(pocev od verzije 4.0)
event.button
taster miša koji je pritisnut; obicno 1 za levi, 2 za desni		 event.modifiers
ukazuje koji taster za promenu (SHIFT, CTRL, ALT) je pritisnut tokom događaja
event.clientX
x-koordinata u pixelima nastanka događaja		 event.pageX
x-koordinata događaj unitar strane
event.clientY
y-koordinata nastanka događaja		 event.pageY
y-koordinat adogađaj unutar strane (prema gornjem levom uglu)
event.altkey
indikator pritska tastera ALT tokom događaja		 event.which
Unicode tastera
event,ctrlkey
indikator pritska tastera CTRL tokom događaja		 event.target
objekat gde se događaj pojavio
event.shiftkey
indikator pritska tastera SHIFT tokom događaja
event.keyCode
 Unicode tastera
event.srcElement
objekat lokacije elementa