U trendu

JavaScript – Događaj OnClick

Znamo da su JavaScript programi vođeni događajima (event-driven), tj. programi reaguju na akcije koje čini korisnik (poseteilac web stranice). Znači, pisanje programa se svodi na kodiranje funkcija koje će se aktivirati kada se desi neki događaj. U ovom prilogu ćemo se pozabaviti događajem „OnClick„, koji spada u događaje uzrokovane aktivnostima miša. Ovaj događaj je najčešće korišćen događaj uzrokovan akcijom miša, a aktivira se kada korisnik – posetilac „klikne“ na objekat na stranici, koji prihvata ovakav događaj. Objekti koji prihvataju događaj „OnClick“ su:

  • linkovi
  • polja za potvrdu (check-box)
  • dugmići (radio-dugmad, reset i submit dugmad).

U sledećem primeru videćemo kako se na stranicu postavljaju objekti koji odgovaraju na događaj „OnClick“. Da bi prikazali da se događaj dogodio, napisaćemo funkciju „Odgovor“ koja će na klik, na određeni objekt, pozvati metodu „Alert“ sa prigodnom porukom.


function odgovor() {
window.alert („Upravo ste aktivirali dogadjaj OnClick.“);
}

Sada ćemo jednostavno, navoditi jedan po jedan, objekte (dugmad) i pozivati prethodnu funkciju na događaj „OnClick“:


<HTML>
<HEAD>
<TITLE>OnClick</TITLE>
<SCRIPT Language="JavaScript">
<!–
function odgovor() {
window.alert ("Upravo ste aktivirali dogadjaj OnClick.");
}
//–>
</SCRIPT>
</HEAD>
<BODY>
<FORM ENCTYPE="application/x-www-form-urlencoded" METHOD="post">
<INPUT TYPE="button" VALUE="Standard.dugme" OnClick="odgovor()"><BR>
<INPUT TYPE="submit" VALUE="Submit dugme" OnClick="odgovor()"><BR>
<INPUT TYPE="reset" VALUE="Reset dugme" OnClick="odgovor()"><BR>
<INPUT TYPE="checkbox" VALUE="Check box" OnClick="odgovor()"><BR>
<INPUT TYPE="radio" VALUE="Radio dugme" OnClick="odgovor()"><BR>
</FORM>
</BODY>
</HTML>

Na kraju evo i primera vezanog za linkove na stranici, tj. kako linkovi reaguju na događaj „OnClick“:


<a href="javascript : odgovor()">Obicni link</a>

Pratite Krstaricu i preko mobilne aplikacije za Android i iPhone.